Question

我有一个表，如果已经选择了表体中的一行或多行，并且让TR类处于“活动状态”，那么应该在表头中显示一个按钮，否则该按钮应该被隐藏。

HTML：

<table>
  <thead>
    <tr>
      <th>Header
        <button type="button" class="add-all-selection">Add Selected Items</button></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
    </tr>
    <tr>
      <td>Item 2</td>
    </tr>
    <tr class="active">
      <td>Item 3</td>
    </tr>
  </tbody>
</table>

无效的JavaScript：

$(document).ready(function() {
    $(this).click(function() {
        if($('tr').hasClass(".active")){
             $(this).prev().hasClass(".add-all-selection").fadeIn(0);
        }
        else {
            $('.add-all-selection').fadeOut(0);
        }
    });
});

Answer 1

您需要将click事件绑定到tr元素（或者更好，委托点击父表）并切换活动类。同时，每次点击都需要检查按钮是隐藏还是可见。

可能的实施可以是：

$(document).ready(function () {
    var $table = $('table').on('click', 'tr', function () {
        $(this).toggleClass('active');

        if ($table.find('tr.active').length) {
            $table.find(".add-all-selection").fadeIn();
        } else {
            $table.find(".add-all-selection").fadeOut();
        }
    });
});

演示： http://jsfiddle.net/n0j9g8ac/

Answer 2

Html代码

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="app2.js"></script>
<style>
td {border: 1px black solid; padding: 5px; cursor: pointer;}
 .selected{
    background-color: brown;
    color: #FFF;
}
</style>    
</head>
<body>
  <div>
    <table>
      <thead>
        <tr>
          <th>Header
            <button type="button" class="add-all-selection">Add Selected Items</button></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Item 1</td>
        </tr>
        <tr>
          <td>Item 2</td>
        </tr>
        <tr >
          <td>Item 3</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Javascript代码

$(document).ready(function() {
   var cssProperties = {'color': 'green', 'background-color': 'blue'};
     $('.add-all-selection').hide();
     $("table tr").on('click', function(e){
       $(this).toggleClass('selected');
       //$(e.currentTarget).css(cssProperties);
       var value=$(this).find('td:first').html();
       //alert(value);    
       $('.add-all-selection').show();
     });
 });

如果至少有一行具有某个类，则在表头中切换按钮

2 个答案: