Question

这次我正在处理订单表。

我有那张桌子：

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

但问题是，当我已经选择了一个时，我想选择全部。然后它反转我的选择：

我希望选择并取消选择所有项目，即使选择了一些项目。

Answer 1

你可以试试这个......（如果你正确使用jQuery）

CustomConfig

添加课程＆＃39;已选择＆＃39;选择所有行时的第th个元素，反之亦然。

Answer 2

我要感谢你的时间Savaratkar。在你的帮助下，我终于可以使用这个版本了：

$("body").on('click', 'tbody tr', function(event){
    $(this).toggleClass('success unselected');
});

$("body").on('click', 'table th.selectAll', function(event){
    if($( "table" ).find( "tr.unselected" ).length > 0) {
        $('tbody tr').removeClass('unselected').addClass('success');
    } else {
        $('tbody tr').removeClass('success').addClass('unselected');
    }
});

https://jsfiddle.net/9ar5h3u0/3/

这个解决方案对我来说很满意。

为所有元素

2 个答案: