<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="selectAll"></th>
<th>Zamówienie</th>
<th>Przewoźnik</th>
<th>Numer listu</th>
<th>Waga</th>
<th>Akcje</th>
</tr>
</thead>
<tbody class="searchable">
<tr id="701" class="" style="display: table-row;">
<td class="lp text-center vert-align">1.</td>
<td class="reference">Sample order 3</td>
<td class="przewoznik">UPS</td>
<td class="numer_listu">BB0000001</td>
<td class="waga">150</td>
<td style="text-align: center;">
<button type="button" class="btn btn-info action action-editOrder btn-xs" data-toggle="tooltip" title="Edytuj zamówienie">
<span class="glyphicon glyphicon-edit" aria-hidden="true"</span>
</button>
<button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>
</td>
</tr>
<tr id="700" class="success" style="display: table-row;">
<td class="lp text-center vert-align">2.</td>
<td class="reference">Sample order 2</td>
<td class="przewoznik">DPD</td>
<td class="numer_listu"></td>
<td class="waga">0</td>
<td style="text-align: center;">
<button type="button" class="btn btn-info action action-editOrder btn-xs" data-toggle="tooltip" title="Edytuj zamówienie">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>
</td>
</tr>
<tr id="699" class="" style="display: table-row;">
<td class="lp text-center vert-align">3.</td>
<td class="reference">Sample order</td>
<td class="przewoznik">DPD</td>
<td class="numer_listu">RR0000001</td>
<td class="waga">0</td>
<td style="text-align: center;">
<button type="button" class="btn btn-info action action-editOrder btn-xs" data-toggle="tooltip" title="Edytuj zamówienie">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
</table>
我想通过单击选择行:
$("body").on('click', 'tbody tr', function(event){
$(this).toggleClass('success');
});
并通过单击选择/取消选择所有行:
$("body").on('click', 'table th.selectAll', function(event){
$('tbody tr').toggleClass('success');
});
但是问题是当我已经选择一个时,如果我想全部选择。然后它反转了我的选择:
我希望选择并取消选择所有项目,即使已选中某些项目也是如此。
最佳答案
您可以尝试...(如果您使用的是jQuery)
$("body").on('click', 'table th.selectAll', function(event){
if($(this).hasClass("selected"){
$('tbody tr').removeClass('success');
$(this).removeClass("selected");
}
else{
$('tbody tr').addClass('success');
$(this).addClass("selected");
}
});
当所有行均被选中时,向元素添加“已选择”类,反之亦然。