[英]Add class to all <tr> by clicking checkbox
使用此代码,我选中了所有复选框:
$(".checkAllCheckboxes").click(function()
{
$('input:checkbox').not(this).prop('checked', this.checked);
});
这样,我将一个类添加到该元素所在的复选框中。
$(function()
{
$('.table_row_checkbox').on('change',function(){
if($(this).is(":checked"))
{
$(this).parents('tr').addClass("checkbox_checked_row");
}
else
{
$(this).parents('tr').removeClass("checkbox_checked_row");
}
});
});
如何通过单击选择所有复选框,在我的第一个代码中将该类添加到所有元素中?
对不起,我不是那个意思。
我生成的表代码如下所示:
<table class="table table-hover table-bordered list">
<thead>
<tr>
<td style="width: 1px; text-align: center;"><input type="checkbox" class="checkAllCheckboxes" /></td>
<td style="text-align: center;">ID</td>
<td class="left">Név</td>
<td class="left">E-mail</td>
<td class="left">Telefonszám</td>
<td style="text-align: center;">Dátum</td>
<td style="text-align: center;">Státusz</td>
<td class="right">Műveletek</td>
</tr>
</thead>
<tbody>
<tr id="sor55">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="55" /></td>
<td style="text-align: center;">55</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99@gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><a href="beerkezett-uzenet.php?id=55"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a id="55" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
<tr id="sor54">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="54" /></td>
<td style="text-align: center;">54</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99@gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><a href="beerkezett-uzenet.php?id=54"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a id="54" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
</tbody>
</table>
在第一个中,有全选复选框。
$(".checkAllCheckboxes").click(function() { $('input:checkbox').not(this).prop('checked', this.checked); $('input:checkbox').each(function() { if($(this).is(":checked")) { $(this).parents('tr').addClass("checkbox_checked_row"); } else { $(this).parents('tr').removeClass("checkbox_checked_row"); } });; }); $('.table_row_checkbox').on('change',function(){ if($(this).is(":checked")) { $(this).parents('tr').addClass("checkbox_checked_row"); } else { $(this).parents('tr').removeClass("checkbox_checked_row"); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-hover table-bordered list"> <thead> <tr> <td style="width: 1px; text-align: center;"><input type="checkbox" class="checkAllCheckboxes" /></td> <td style="text-align: center;">ID</td> <td class="left">Név</td> <td class="left">E-mail</td> <td class="left">Telefonszám</td> <td style="text-align: center;">Dátum</td> <td style="text-align: center;">Státusz</td> <td class="right">Műveletek</td> </tr> </thead> <tbody> <tr id="sor55"> <td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="55" /></td> <td style="text-align: center;">55</td> <td class="left">Nagy Andrea</td> <td class="left">andi99@gmail.com</td> <td class="left">06 70 8382 11</td> <td style="text-align: center;">2016-08-13 20:33</td> <td style="text-align: center; color:#ff0000">Új üzenet</td> <td class="right"><a href="beerkezett-uzenet.php?id=55"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a id="55" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td> </tr> <tr id="sor54"> <td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="54" /></td> <td style="text-align: center;">54</td> <td class="left">Nagy Andrea</td> <td class="left">andi99@gmail.com</td> <td class="left">06 70 8382 11</td> <td style="text-align: center;">2016-08-13 20:33</td> <td style="text-align: center; color:#ff0000">Új üzenet</td> <td class="right"><a href="beerkezett-uzenet.php?id=54"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a id="54" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td> </tr> </tbody> </table>
或者,稍短一些,请参见此处的小提琴 (编辑):
$(".checkAllCheckboxes").click(function()
{
$(this).closest('table').find('input:checkbox').prop('checked', this.checked)
.closest('tr').toggleClass('selected',this.checked)
});
功能并两者中,设置刻度线和分配/移除类名到父- tr
秒。 事实证明,甚至没有必要使用.addSelf()
.not(this)
和以后的.addSelf()
来达到预期的效果。 因此,我再次删除了它们(“少写,多做”)。
.closest()
在可能存在嵌套表的情况下是有利的( .parents()
会找到所有父表) .closest('tr')
获取要处理的tr
。 好吧,以上内容并不能完全解决所有问题。 单击“常规”复选框时,它不会执行tr
-class-handling。 执行以下操作:
$('input:checkbox').click(function()
{ var jqobj=$(this);
if (jqobj.hasClass('checkAllCheckboxes')) // extend the selection
{ jqobj=jqobj.closest('table').find('input:checkbox'); }
jqobj.prop('checked', this.checked).closest('tr')
.toggleClass('selected',this.checked);
});
这也可以用来达到相同
$(".checkAllCheckboxes").click(function(){
if($(this).is(':checked')){
$(this).parents('tr').addClass('checked');
$('tbody tr').addClass('checked')
$('tbody input[type="checkbox"]').prop('checked',true)
}
else{
$(this).parents('tr').removeClass('checked');
$('tbody tr').removeClass('checked')
$('tbody input[type="checkbox"]').prop('checked',false)
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.