jquery onclick 模态弹出窗口中的按钮更改当前td的值 [英] jquery onclick the button in modal popup window change value of the current td

查看：32
本文介绍了jquery onclick 模态弹出窗口中的按钮更改当前td的值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用 bootstrap 和 jquery，我创建了与模态弹出窗口链接的表.在表格中我有两个动作图标

  1. 激活
  2. 取消激活

目前，点击表格中的激活图标，弹出窗口显示当前行的值以及激活按钮，我需要OnClick这个弹出窗口中的激活按钮需要将当前td中的激活图标更改为取消激活图标.像 De-activate 图标一样需要做.请帮我找出这个.

下面是代码.

<table class="table table-bordered table-striped table-hover"><头><tr><th>姓名</th><th>用户名</th><th>Action</th></tr></thead><tr><td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Jayashree</span></a><;/td><td><span class="lsusrlname">Gopalan</span></td><td align=center><a href="#" data-toggle="modal" data-target="#usract"><span class="usrin glyphicon glyphicon-ok" title="Activate"></span></a></td></tr><tr><td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Siva</span></a><;/td><td><span class="lsusrlname">Prasad</span></td><td align=center><a href="#" data-toggle="modal" data-target="#usrdeact"><span class="usrrm glyphicon glyphicon-remove" title="De-Activate"></span></a></td></tr></tbody>

模型窗口:

<div class="modal-body"><div class="row"><div class="col-md-12"><div class="form-horizo​​ntal disableform"><div class="form-group"><!-- 为验证添加has-error"--><label class="control-label col-xs-6 col-md-4">名字</label><div class="col-xs-12 col-sm-6 col-md-8"><input type="text" class="form-control fname" placeholder="名字"><!--<span class="help-block">您不能将其留空.</span>-->

<div class="form-group"><!-- 添加验证错误--><label class="control-label col-xs-6 col-md-4">姓</label><div class="col-xs-12 col-sm-6 col-md-8"><input type="text" class="form-control lname" placeholder="Last Name"><!--<span class="help-block">您不能将其留空.</span>-->

<p>您确定要激活此用户吗?<button type="button" class="btn btn-success" id="actusr" data-dismiss="modal" >激活</button><button type="button" class="btn btn-danger" data-dismiss="modal">NO</button></p>

<div class="modalfade" id="usrdeact" role="dialog"><div class="modal-dialog uc-modal"><!-- 模态内容--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h3 class="modal-title">取消激活用户</h3>

<div class="modal-body"><div class="row"><div class="col-md-12"><div class="form-horizo​​ntal disableform"><div class="form-group"><!-- 为验证添加has-error"--><label class="control-label col-xs-6 col-md-4">名字</label><div class="col-xs-12 col-sm-6 col-md-8"><input type="text" class="form-control fname" placeholder="名字"><!--<span class="help-block">您不能将其留空.</span>-->

<div class="form-group"><!-- 添加验证错误--><label class="control-label col-xs-6 col-md-4">姓</label><div class="col-xs-12 col-sm-6 col-md-8"><input type="text" class="form-control lname" placeholder="Last Name"><!--<span class="help-block">您不能将其留空.</span>-->

<p>您确定要取消激活此用户吗?<button type="button" class="btn btn-success" id="de_actusr">De-Activate</button><button type="button" class="btn btn-danger" data-dismiss="modal">NO</button></p>

查询:

$(".usrrm, .usrin").click(function(){var tdusrname=$(this).parents("tr").children("td:first").text();$(".fname").val(tdusrname);var tdlname=$(this).parents("tr").children("td:nth-child(2)").text();$(".lname").val(tdlname);});$("#actusr").click(function(){$('tr td span').removeClass('usrm glyphicon glyphicon-ok');$('tr td span').addClass('usrin glyphicon glyphicon-remove');});$("#de_actusr").click(function(){$('tr td span').removeClass('usrm glyphicon glyphicon-remove');$('tr td span').addClass('usrin glyphicon glyphicon-ok');});

请帮我找出来

解决方案

如果只是前端的东西你需要改变，而你又不太关心后端，那么你可以根据需要使用 jQuery 添加和删除类.使用你的小提琴:

/* 点击勾选按钮，添加当前类 */$('.usrin').each(function(){$(this).on('click' , function(){$(this).addClass('current');});});/* 单击 x 按钮并添加一个当前类 */$('.usrrm').each(function(){$(this).on('click' , function(){$(this).addClass('current');});});/* 单击激活按钮并更改刻度或 x 的类 */$('#actusr').on('click' , function(){var current = $('.table-responsive').find('.current');current.toggleClass('usrin glyphicon-ok usrrm glyphicon-remove');});/* 单击取消激活按钮并更改刻度或 x 的类 */$('#de_actusr').on('click' , function(){var current = $('.table-responsive').find('.current');current.toggleClass('usrin glyphicon-ok usrrm glyphicon-remove');})/* 单击窗口关闭按钮并删除当前类 */$('.close').on('click' , function(){var current = $('.table-responsive').find('.current');current.removeClass('current');});

Using bootstrap and jquery, I have created the table linked with the modal popup window. In the table I have two action icons

  1. Activate
  2. De-Activate

Currently, on click to the Activate icon in the table the popup window is appearing with the value of current row along with the Activate button, my need is OnClick to this Activate button in the popup window the activate icon in the current td need to be changed as de-activate icon. Like the same need to do for De-activate icon. please help me to find out this.

below is the code.

<div class="table-responsive">
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Username</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Jayashree</span></a></td>
                <td><span class="lsusrlname">Gopalan</span></td>
                <td align=center>
                    <a href="#" data-toggle="modal" data-target="#usract"><span class="usrin glyphicon glyphicon-ok" title="Activate"> </span></a>
                </td>

            </tr>
            <tr>
                <td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Siva</span></a></td>
                <td><span class="lsusrlname">Prasad</span></td>
                <td align=center>
                    <a href="#" data-toggle="modal" data-target="#usrdeact"><span class="usrrm glyphicon glyphicon-remove" title="De-Activate"> </span></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Model window:

<div class="modal fade" id="usract" role="dialog">
    <div class="modal-dialog uc-modal">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">Activate user</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-horizontal disableform">
                            <div class="form-group">
                                <!-- add "has-error" for validation-->
                                <label class="control-label col-xs-6 col-md-4">First Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control fname" placeholder="First Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                            <div class="form-group">
                                <!-- add has-error for validation-->
                                <label class="control-label col-xs-6 col-md-4">Last Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control lname" placeholder="Last Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                        </div>

                        <p>Are you sure want to Activate this User ? 
                            <button type="button" class="btn btn-success" id="actusr" data-dismiss="modal" >Activate</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="usrdeact" role="dialog">
    <div class="modal-dialog uc-modal">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">De-Activate user</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-horizontal disableform">
                            <div class="form-group">
                                <!-- add "has-error" for validation-->
                                <label class="control-label col-xs-6 col-md-4">First Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control fname" placeholder="First Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                            <div class="form-group">
                                <!-- add has-error for validation-->
                                <label class="control-label col-xs-6 col-md-4">Last Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control lname" placeholder="Last Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                        </div>

                        <p>Are you sure want to De-Activate this User ? 
                            <button type="button" class="btn btn-success" id="de_actusr">De-Activate</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Jquery :

$(".usrrm, .usrin").click(function(){
    var tdusrname=$(this).parents("tr").children("td:first").text();
    $(".fname").val(tdusrname);

    var tdlname=$(this).parents("tr").children("td:nth-child(2)").text();
    $(".lname").val(tdlname);
});

$("#actusr").click(function(){ 
    $('tr td span').removeClass('usrm glyphicon glyphicon-ok');
    $('tr td span').addClass('usrin glyphicon glyphicon-remove');
});

$("#de_actusr").click(function(){ 
    $('tr td span').removeClass('usrm glyphicon glyphicon-remove');
    $('tr td span').addClass('usrin glyphicon glyphicon-ok');
});

please help me to find out this

解决方案

If it's just front end stuff that you need to change and you're not too concerned about the back end then you could add and remove classes as required using jQuery. Using your fiddle:

/* Click the tick button and add a class of current */
$('.usrin').each(function(){
    $(this).on('click' , function(){
        $(this).addClass('current');
  });
});
/* Click the x button and add a class of current */
$('.usrrm').each(function(){
    $(this).on('click' , function(){
        $(this).addClass('current');
  });
});
/* Click the activate button and change the classes of the tick or x */
$('#actusr').on('click' , function(){
    var current = $('.table-responsive').find('.current');
  current.toggleClass('usrin glyphicon-ok usrrm glyphicon-remove');
});
/* Click the de-activate button and change the classes of the tick or x */
$('#de_actusr').on('click' , function(){
    var current = $('.table-responsive').find('.current');
  current.toggleClass('usrin glyphicon-ok usrrm glyphicon-remove');
})
/* Click the window close button and remove the current class */
$('.close').on('click' , function(){
    var current = $('.table-responsive').find('.current');
  current.removeClass('current');
});

这篇关于jquery onclick 模态弹出窗口中的按钮更改当前td的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆