这次我正在使用订单表。

我有那张桌子:
jquery - 向所有元素添加/删除类-LMLPHP

<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>


我想通过单击选择行:
jquery - 向所有元素添加/删除类-LMLPHP

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


并通过单击选择/取消选择所有行:
jquery - 向所有元素添加/删除类-LMLPHP

$("body").on('click', 'table th.selectAll', function(event){
    $('tbody tr').toggleClass('success');
});


但是问题是当我已经选择一个时,如果我想全部选择。然后它反转了我的选择:
jquery - 向所有元素添加/删除类-LMLPHP

我希望选择并取消选择所有项目,即使已选中某些项目也是如此。

最佳答案

您可以尝试...(如果您使用的是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");
    }
    });


当所有行均被选中时,向元素添加“已选择”类,反之亦然。

09-25 17:12
查看更多