javascript - 如果 TD 不包含值，多个复选框会隐藏行

Question

我有一个包含 td 和文本的表格。我希望能够根据复选框值过滤每一行。例如，如果我只选择一个复选框，它将查找并过滤掉不包含该复选框值的行。如果我选择两个复选框，它将过滤并仅显示包含复选框的两个值的行。我可以让它部分工作，但如果存在复选框值，它将显示该行，无论是否选择了第二个复选框。当选择其他复选框时，如何使其进一步过滤？

这是我到目前为止的代码。

jQuery('document').ready(function(){
var $ = jQuery
$(":checkbox").click(function() {
var showAll = true;
$('tr').not('.first').hide();
var checkedValues = $(":checkbox:checked").map(function() {
    return this.value;
}).get();

$("tbody tr").hide();
for (var i = 0; i < checkedValues.length; i++) {
    showAll = false;
    $("td:contains('" + checkedValues[i] + "')").parent("tr").show();
}

if(showAll){
    $('tr').show();
}
});
});

Answer 1

假设您只需要包含已选中复选框的所有值的行。

试试这个:

$(":checkbox").click(function() {
  var checkedValues = $(":checkbox:checked").map(function() {
    return this.value;
  }).get();

  $("tbody tr")
  .hide()
  .filter(function() {
  	var
    $tr = $(this),
    $tds = $.map(checkedValues, function(v) {
    	return $tr.find('td:contains(' + v + ')').length > 0 ? v : null;
    });
    return $tds.length == checkedValues.length;
  }).show();

  if (checkedValues.length == 0) {
    $('tr').show();
  }
});

#searchTable {
  border-collapse: collapse;
}

#searchTable td {
  border: 1px solid #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="buh" value="buh">
<label for="buh">buh</label>
<input type="checkbox" id="dum" value="dum">
<label for="dum">dum</label>
<input type="checkbox" id="tss" value="tss">
<label for="tss">tss</label>

<table id="searchTable">
  <thead>
    <tr class="first">
      <td>probably</td>
      <td>are</td>
      <td>headers</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>buh</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>dum</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>tss</td>
    </tr>
    <tr>
      <td>buh</td>
      <td>dum</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>dum</td>
      <td>tss</td>
    </tr>
    <tr>
      <td>buh</td>
      <td></td>
      <td>tss</td>
    </tr>
  </tbody>
</table>