向所有元素添加/删除类

我有一个表：

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

但问题是当我想要选择所有的情况下，当我已经选择一个。然后它反转我的选择：

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

来源

2016-02-19 user3041764

显然它会切换之前选择的那个。首先执行removeClass，然后对所有行执行toggleClass。 – Savaratkar

确定它的简单，但是...它不工作，以防止取消选择:) – user3041764

好了解... – Savaratkar

你可以试试这个...（如果你使用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"); 
    } 
    });

添加“选择”时，所有的行被选中，反之亦然个元素的类。

来源

2016-02-19 12:28:45 Savaratkar

这是非常接近，但在这种情况下，当我手动选择几个或alll记录，并选择类在'th.selectAll'上。 – user3041764

我明白它不会选择所有行。但无法理解为什么选择少数行时不起作用。 – Savaratkar

因为当我手动选择几行并且'th.selectAll'有class'selected'并且当我点击时，然后函数从所有项中移除类'succes'。但是，也许它有意义，我已经过度了; p – user3041764

我想感谢您的时间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/

该解决方案是让我满意。

来源

2016-02-19 13:53:01 user3041764

向所有元素添加/删除类

回答

相关问题