使用 bootstrap 和 jquery，我创建了与模态弹出窗口链接的表。在表格中我有两个 Action 图标
- 激活
- 停用
目前，点击表中的激活图标弹出窗口显示当前行的值以及激活按钮，我需要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">×</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">×</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>
J查询:
$(".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 添加和删除类。 使用你的 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');
});
关于javascript - jquery onclick 模态弹出窗口中的按钮更改当前 td 的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46935536/