Fatal编程技术网
  • javascript/
  • Javascript jquery在模式弹出窗口中单击按钮，更改当前td的值

Javascript jquery在模式弹出窗口中单击按钮，更改当前td的值

javascript jquery twitter-bootstrap

Javascript jquery在模式弹出窗口中单击按钮，更改当前td的值,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,使用bootstrap和jquery，我创建了与模态弹出窗口链接的表。在表中，我有两个动作图标 使活动 去激活 当前，单击表格中的激活图标时，弹出窗口显示当前行的值以及激活按钮，我需要在弹出窗口中单击此激活按钮。当前td中的激活图标需要更改为取消激活图标。同样的需要去激活图标。请帮我找出这个 下面是代码 <div class="table-responsive"> <table class="table table-bordered table-striped tabl

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

使活动 去激活 当前，单击表格中的激活图标时，弹出窗口显示当前行的值以及激活按钮，我需要在弹出窗口中单击此激活按钮。当前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>
请帮我找出这一点

打开modal时，您需要专注于事件。看

当modal打开时，您需要将注意力集中在事件上。看

我已经对它进行了相当广泛的评论，但它似乎做了你想做的事情。首先，单击glyph时，我们需要“书签”触发模式的元素，无论是激活还是停用。然后，如果模式被取消，我们需要删除该书签。如果用户单击了激活/停用按钮，我们需要做很多事情，可能包括后端处理：我们需要删除书签、更新glyph类、重定向目标模式以及更改工具提示文本。请在下面查看它的工作情况，或作为一个示例

同样，我的代码应该有非常清晰的文档记录。祝你好运

$.usrrm、.usrin.clickfunction{ //标记触发情态动词的元素。我们稍后需要它。 $this.parent.addClassCurrent-active-el； //填充模式字段。 var tdusrname=$this.parentstr.childrentd:first.text； $.fname.valtdusrname； var tdlname=$this.parentstr.childrentd:nth-child2.text； $.lname.valtdlname； }; /***** *actusr.click-我们正在激活此用户。在这一点上,， *我们需要回到触发模态的元素， *并删除其标记类。我们还有几件事要做 *需要做的事情：首先，将模态目标从活动 *模式切换为非活动模式，并更改跨度的图标。 * *****/ $actusr.clickfunction{ $。当前处于活动状态 .attrdata目标，usrdeact//重定向目标模式， .removeClass当前处于活动状态//删除占位符 findspan .removeClass'usrin glyphicon ok'//切换glyph类 .addClass“usrrm图示符删除” .proptitle，停用//更改工具提示文本 }; /***** *de_actusr.click-我们正在停用此用户。在这一点上,， *我们需要回到触发模态的元素， *并删除其标记类。我们还有几件事要做 *需要做的事情：首先，将模态目标从活动 *模态转换为活动模态，并更改跨度的图标。 * *****/ $de_actusr.clickfunctionevt{ $。当前处于活动状态 .attrdata目标，usract//重定向目标模式， .removeClass当前处于活动状态//删除占位符 findspan .removeClass'usrrm Glyphion remove' .addClass'usrin glyphicon ok'//切换glyph类 .proptitle，激活//更改工具提示文本 }; /***** *任何解除模态的模态按钮也需要移除 *占位符类。否则，事情很快就会变得一团糟。 *****/ $[data='modal'].onclick，函数{ $。当前处于活动状态 .removeclass当前活动的el； } .usrin{color:ccc；} .usrrm{color:d9534f；} .usrin:hover、.usrin:focus、.usrin:active、.usrin:visted{color:66b90e；} .usrrm:hover、.usrrm:focus、.usrrm:active、.usrrm:visted{color:c9302c；} .table>thead{ 背景色：337ab7； 颜色：eee； } 名称 用户名 行动 戈帕兰 普拉萨德 &时代； 激活用户 名字 你不能让这个空着。-> 姓 你不能让这个空着。-> 你确定w 要激活此用户吗？ 使活动 不

&时代； 取消激活用户 名字 你不能让这个空着。-> 姓 你不能让这个空着。-> 是否确实要取消激活此用户？ 去激活 不

我已经对它进行了相当广泛的评论，但它似乎做了你想做的事情。首先，单击glyph时，我们需要“书签”触发模式的元素，无论是激活还是停用。然后，如果模式被取消，我们需要删除该书签。如果用户单击了激活/停用按钮，我们需要做很多事情，可能包括后端处理：我们需要删除书签、更新glyph类、重定向目标模式以及更改工具提示文本。请在下面查看它的工作情况，或作为一个示例

同样，我的代码应该有非常清晰的文档记录。祝你好运

$.usrrm、.usrin.clickfunction{ //标记触发情态动词的元素。我们稍后需要它。 $this.parent.addClassCurrent-active-el； //填充模式字段。 var tdusrname=$this.parentstr.childrentd:first.text； $.fname.valtdusrname； var tdlname=$this.parentstr.childrentd:nth-child2.text； $.lname.valtdlname； }; /***** *actusr.click-我们正在激活此用户。在这一点上,， *我们需要回到触发模态的元素， *并删除其标记类。我们还有几件事要做 *需要做的事情：首先，将模态目标从活动 *模式切换为非活动模式，并更改跨度的图标。 * *****/ $actusr.clickfunction{ $。当前处于活动状态 .attrdata目标，usrdeact//重定向目标模式， .removeClass当前处于活动状态//删除占位符 findspan .removeClass'usrin glyphicon ok'//切换glyph类 .addClass“usrrm图示符删除” .proptitle，停用//更改工具提示文本 }; /***** *de_actusr.click-我们正在停用此用户。在这一点上,， *我们需要回到触发模态的元素， *并删除其标记类。我们还有几件事要做 *需要做的事情：首先，将模态目标从活动 *模态转换为活动模态，并更改跨度的图标。 * *****/ $de_actusr.clickfunctionevt{ $。当前处于活动状态 .attrdata目标，usract//重定向目标模式， .removeClass当前处于活动状态//删除占位符 findspan .removeClass'usrrm Glyphion remove' .addClass'usrin glyphicon ok'//切换glyph类 .proptitle，激活//更改工具提示文本 }; /***** *任何解除模态的模态按钮也需要移除 *占位符类。否则，事情很快就会变得一团糟。 *****/ $[data='modal'].onclick，函数{ $。当前处于活动状态 .removeclass当前活动的el； } .usrin{color:ccc；} .usrrm{color:d9534f；} .usrin:hover、.usrin:focus、.usrin:active、.usrin:visted{color:66b90e；} .usrrm:hover、.usrrm:focus、.usrrm:active、.usrrm:visted{color:c9302c；} .table>thead{ 背景色：337ab7； 颜色：eee； } 名称 用户名 行动 戈帕兰 普拉萨德 &时代； 激活用户 名字 你不能让这个空着。-> 姓 你不能让这个空着。-> 是否确实要激活此用户？ 使活动 不

&时代； 取消激活用户 名字 你不能让这个空着。-> 姓 你不能让这个空着。-> 是否确实要取消激活此用户？ 去激活 不

如果只是前端需要更改，而不太关心后端，那么可以使用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');
});
如果只是前端需要更改，而不太关心后端，那么可以使用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');
});
谢谢大家，我用Derek Nolan和Snowmonkey的代码在中解决了这个问题，谢谢你们的努力朋友们。谢谢大家，我用Derek Nolan和Snowmonkey的代码在中解决了这个问题，谢谢你们的努力朋友们。很好，这是我期待的，非常感谢你们，但是在切换glyph类时，类usrm和usrin没有改变它发生的原因？有两个原因：第一，我让它在这两种情况下都添加了usrin类，因此逻辑不确定；第二，我键入了错误的usrrm类名usrm。修复并工作良好。很好，这是我期待的一个，非常感谢，但是在切换glyph类时，类usrm和usrin没有改变它发生的原因。原因有两个：第一，我让它在两种情况下都添加了usrin类，所以逻辑不确定，第二，我输入了错误的usrm类名称。修好了，很好用。祝你好运！杰出的祝你好运！ 
$('#myModal').on('shown.bs.modal', function () {
  //do the necessary things
})

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