堆栈内存溢出
  繁体   English   中英

jQuery onclick在模式弹出窗口中的按钮更改当前td的值

[英]jquery onclick the button in modal popup window change value of the current td

 原文  2017-10-25 14:48:17  3   3    javascript/ jquery/ twitter-bootstrap

问题描述

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

  1. 启用
  2. 停用

目前，上点击，在弹出的窗口与激活按钮沿着当前行的值出现在表中的激活图标 ，我需要的是的OnClick 在弹出窗口此激活按钮 ，在目前TD激活图标需更改为停用图标。 就像需要取消激活图标一样。 请帮助我找出这个。

下面是代码。 

<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>

模型窗口： 

<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');
});

请帮我找出这个

3 个解决方案

解决方案1
 2  2017-10-25 16:07:04

我已经对其进行了广泛的评论，但它似乎可以满足您的要求。 首先，当单击字形时，我们需要“标记”触发模式的元素，无论是激活还是停用。 然后，如果模态被关闭，我们需要删除该书签。 如果用户单击了激活/停用按钮，我们需要做很多事情（可能包括您的后端处理）：我们需要删除该书签，更新字形类，重定向目标模式，并进行更改工具提示文字。 看到它在下面工作，或摆弄 。

同样，我的代码应该很清楚地记录在案。 祝你好运！ 

 $(".usrrm, .usrin").click(function() { // Mark the element that triggered the modals. we'll need this later. $(this).parent().addClass("currently-active-el"); // Populate the modal fields. 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() - we are activating this user. At this point, * we need to go back to that element that triggered the modal, * and remove its flagging class. We have a few other things we * need to do: first, redirect the modal target from the active * modal to the deactive modal, and change the icons for the span. * *****/ $("#actusr").click(function() { $(".currently-active-el") .attr("data-target", "#usrdeact") // redirect the target modal, .removeClass("currently-active-el"). // remove the placeholder find("span") .removeClass('usrin glyphicon-ok') // toggle the glyph class .addClass('usrrm glyphicon-remove') .prop("title", "Deactivate") // change the tooltip text }); /***** * #de_actusr.click() - we are deactivating this user. At this point, * we need to go back to that element that triggered the modal, * and remove its flagging class. We have a few other things we * need to do: first, redirect the modal target from the active * modal to the active modal, and change the icons for the span. * *****/ $("#de_actusr").click(function(evt) { $(".currently-active-el") .attr("data-target", "#usract") // redirect the target modal, .removeClass("currently-active-el"). // remove the placeholder find("span") .removeClass('usrrm glyphicon-remove') .addClass('usrin glyphicon-ok') // toggle the glyph class .prop("title", "Activate") // change the tooltip text }); /***** * Any modal button that dismisses the modal also needs to remove * the placeholder class. Otherwise, things will get messy fast. *****/ $("[data-dismiss='modal']").on("click", function(){ $(".currently-active-el") .removeClass("currently-active-el"); }) 
 .usrin{color: #ccc;} .usrrm{color: #d9534f;} .usrin:hover, .usrin:focus, .usrin:active, .usrin:visited{color: #66b90e;} .usrrm:hover, .usrrm:focus, .usrrm:active, .usrrm:visited{color: #c9302c;} .table > thead{ background-color:#337ab7; color: #eee; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <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> <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" data-dismiss="modal">De-Activate</button> <button type="button" class="btn btn-danger" data-dismiss="modal">NO</button> </p> </div> </div> </div> </div> </div> </div>

解决方案2
 2 已采纳  2017-10-25 16:22:17

如果您只是需要更改前端的内容而又不太在意后端，则可以使用jQuery根据需要添加和删除类。 用你的小提琴： 

/* 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');
});

解决方案3
 0  2017-10-25 15:16:13

打开模态时，您需要专注于事件。 看这里 

$('#myModal').on('shown.bs.modal', function () {
  //do the necessary things
})

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery UI Modal弹出窗口-按钮单击 jQuery UI Modal弹出窗口在按钮上单击 将弹出窗口更改为模式窗口 jQuery函数用td中的按钮改变td值 Onclick将值传递给弹出模式 条形码扫描仪触发下一个按钮onclick事件和弹出窗口JQuery 使用Bootstrap使用onclick按钮在模式窗口中设置文本框值 html 中的超链接模式弹出 window 的 Onclick 模态弹出窗口中的输入值消失，从按钮输入 jquery 值 如何更改按钮的当前背景颜色 onclick jQuery
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM