Question

我有一个带有复选框过滤器的表，当运行代码时，计数运行良好，但是当我复选框来过滤它时不计算任何，我的html：

<table class="checkcontainer">
  <tr>
    <td>
      <input type='checkbox' name='filter' id="One" checked="" value="One" onchange="chct()"/> One
    </td>
    <td>
      <input type='checkbox' name='filter' id="Two" checked="" value="Two" /> Two
    </td>
    <td>
      <input type='checkbox' name='filter' id="Three" checked="" value="Three" /> Three
    </td>
  </tr>
</table>

<table class="datatbl" border=1 >
  <tr>
    <th>No.</th>
    <th>Content</th>
    <th>Type</th>
  </tr>
  <tbody id="aaa">
  <tr data-rowtype="One">
    <td>1</td>
    <td>this is first row</td>
    <td>One</td>
  </tr>
  <tr data-rowtype="Two">
    <td>2</td>
    <td>this is second row</td>
    <td>Two</td>
  </tr>
  <tr data-rowtype="Three">
    <td>3</td>
    <td>this is third row</td>
    <td>Three</td>
  </tr>
  <tr data-rowtype="One">
    <td>4</td>
    <td>this is fourth row</td>
    <td>One</td>
  </tr>
  <tr data-rowtype="Two">
    <td>5</td>
    <td>this is fifth row</td>
    <td>Two</td>
  </tr>
  <tr data-rowtype="Three">
    <td>6</td>
    <td>this is sixth row</td>
    <td>Three</td>
  </tr>
</tbody>

JS：

window.console.clear();
$('.checkcontainer').on('change', 'input[type="checkbox"]', function() {
  var cbs = $('.checkcontainer').find('input[type="checkbox"]');
  var all_checked_types = [];
  cbs.each(function() {
    var mycheckbox = $(this);
    $('.datatbl tr').filter(function() {
        return $(this).data('rowtype') == mycheckbox.val();
    }).toggle(mycheckbox[0].checked);
  });
});
$("#total").text($("#aaa tr").length);
function chct() {  
$("#total").text($("#aaa tr").length);
}

当我勾选复选框时，但是计算表中的行的功能未运行

如何在使用过滤器复选框时计算表中的行数？

谢谢

Code jsfiddle

Answer 1

一些事情。过滤器不会破坏tr元素。 jquery：visible和：hidden过滤器将根据display属性进行计数。并且您必须重新计算onchange处理程序中的count字段值。 jsfiddle已更新。

window.console.clear();
$('.checkcontainer').on('change', 'input[type="checkbox"]', function() {
  var cbs = $('.checkcontainer').find('input[type="checkbox"]');
  var all_checked_types = [];
  cbs.each(function() {
    var mycheckbox = $(this);
    $('.datatbl tr').filter(function() {
        return $(this).data('rowtype') == mycheckbox.val();
    }).toggle(mycheckbox[0].checked);
  });
});
$("#total").text($("#aaa tr").length);
function chct() {  
$("#total").text($("#aaa tr").length);
}

Answer 2

这里有两个问题：

过滤器更改后，您不会调用chct功能。
您的选择器只会获得tr的数量，即使它们不可见。只需添加:visible即可。

window.console.clear();
$('.checkcontainer').on('change', 'input[type="checkbox"]', function() {
  var cbs = $('.checkcontainer').find('input[type="checkbox"]');
  var all_checked_types = [];
  cbs.each(function() {
    var mycheckbox = $(this);
    $('.datatbl tr').filter(function() {
        return $(this).data('rowtype') == mycheckbox.val();
    }).toggle(mycheckbox[0].checked);
  });
  chct();
});
$("#total").text($("#aaa tr").length);
function chct() {  
$("#total").text($("#aaa tr:visible").length);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="checkcontainer">
  <tr>
    <td>
      <input type='checkbox' name='filter' id="One" checked="" value="One" onchange="chct()"/> One
    </td>
    <td>
      <input type='checkbox' name='filter' id="Two" checked="" value="Two" /> Two
    </td>
    <td>
      <input type='checkbox' name='filter' id="Three" checked="" value="Three" /> Three
    </td>
  </tr>
</table>

<table class="datatbl" border=1 >
  <tr>
    <th>No.</th>
    <th>Content</th>
    <th>Type</th>
  </tr>
  <tbody id="aaa">
  <tr data-rowtype="One">
    <td>1</td>
    <td>this is first row</td>
    <td>One</td>
  </tr>
  <tr data-rowtype="Two">
    <td>2</td>
    <td>this is second row</td>
    <td>Two</td>
  </tr>
  <tr data-rowtype="Three">
    <td>3</td>
    <td>this is third row</td>
    <td>Three</td>
  </tr>
  <tr data-rowtype="One">
    <td>4</td>
    <td>this is fourth row</td>
    <td>One</td>
  </tr>
  <tr data-rowtype="Two">
    <td>5</td>
    <td>this is fifth row</td>
    <td>Two</td>
  </tr>
  <tr data-rowtype="Three">
    <td>6</td>
    <td>this is sixth row</td>
    <td>Three</td>
  </tr>
</tbody>
</table>
<div id="total">
  empty
</div>

Answer 3

使用：可见（这会计算该表中的可见tr）

window.console.clear();
$('.checkcontainer').on('change', 'input[type="checkbox"]', function() {

  var cbs = $('.checkcontainer').find('input[type="checkbox"]');
  var all_checked_types = [];
  cbs.each(function() {
    var mycheckbox = $(this);
    $('.datatbl tr').filter(function() {
        return $(this).data('rowtype') == mycheckbox.val();
    }).toggle(mycheckbox[0].checked);
  });

  chct();
});

function chct() {  
$("#total").text($("#aaa tr:visible").length);
}

JSFIDDLE

为什么我的代码在使用过滤器复选框时不计算表中的行数

3 个答案: