Question

我正在使用复选框过滤表格。在某些方面，我的代码工作正常。

我希望它能够在满足所有检查时过滤结果，而不是一个。

基于：How can I add to my table filter to allow for multiple checkbox selections, as well as filtering from a dropdown?

$("input[name='filterStatus'], select.filter").change(function() {
  var classes = [];
  var stateClass = ""

  $("input[name='filterStatus']").each(function() {
    if ($(this).is(":checked")) {
      classes.push('.' + $(this).val());
    }
  });

  if (classes == "" && stateClass == "") {
    // if no filters selected, show all items
    $("#StatusTable tbody tr").show();
  } else {
    // otherwise, hide everything...
    $("#StatusTable tbody tr").hide();

    // then show only the matching items
    rows = $("#StatusTable tr" + stateClass).filter(classes.length ? classes.join(',') : '*');
    if (rows.size() > 0) {
      rows.show();
    }
  }

});

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<body>
  <form name="FilterForm" id="FilterForm" action="" method="">
    <input type="checkbox" name="filterStatus" value="ISO " />
    <label for="filter_1">ISO</label>
    <input type="checkbox" name="filterStatus" value="AMCA" />
    <label for="filter_2">AMCA</label>
    <input type="checkbox" name="filterStatus" value="UL" />
    <label for="filter_3">UL</label>
  </form>

  <table border="1" id="StatusTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>ISO</th>
        <th>AMCA</th>
        <th>UL</th>
      </tr>
      <tbody>
        <tr class="ISO">
          <td class="Name">Name1</td>
          <td class="ISO">&#x2713;</td>
          <td class="AMCA">&nbsp;</td>
          <td class="UL">&nbsp;</td>
        </tr>
        <tr class="ISO AMCA">
          <td class="Name">Name2</td>
          <td class="ISO">&#x2713;</td>
          <td class="AMCA">&#x2713;</td>
          <td class="UL">&nbsp;</td>
        </tr>
        <tr class="ISO AMCA UL">
          <td class="Name">Name3</td>
          <td class="ISO">&#x2713;</td>
          <td class="AMCA">&#x2713;</td>
          <td class="UL">&#x2713;</td>
        </tr>

      </tbody>
  </table>
  <script></script>
</body>

</html>

Answer 1

修改jQuery在每行循环的位置。创建一个标记变量来存储是否要显示该行，并默认将其设置为 true 。

现在，当您遍历每一行时，您还将遍历要检查的每个类。如果在任何时候，循环测试失败，请将show变量设置为 false 以隐藏该行。

＆＃13;

$("input[name='filterStatus']").change(function () {
    var classes = [];

    $("input[name='filterStatus']").each(function () {
        if ($(this).is(":checked")) { classes.push('.' + $(this).val()); }
    });

    if (classes == "") { // if no filters selected, show all items
        $("#StatusTable tbody tr").show();
    } else { // otherwise, hide everything...
        $("#StatusTable tbody tr").hide();

        $("#StatusTable tr").each(function () {
            var show = true;
            var row = $(this);
            classes.forEach(function (className) {
                if (row.find('td' + className).html() == '&nbsp;') { show = false; }
            });
            if (show) { row.show(); }
        });
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </head>
    
    <body>
        <form name="FilterForm" id="FilterForm" action="" method="">
            <input type="checkbox" name="filterStatus" value="ISO " />
            <label for="filter_1">ISO</label>
            <input type="checkbox" name="filterStatus" value="AMCA" />
            <label for="filter_2">AMCA</label>
            <input type="checkbox" name="filterStatus" value="UL" />
            <label for="filter_3">UL</label>
        </form>
        <table border="1" id="StatusTable">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>ISO</th>
                    <th>AMCA</th>
                    <th>UL</th>
                </tr>
                <tbody>
                    <tr class="ISO">
                        <td class="Name">Name1</td>
                        <td class="ISO">&#x2713;</td>
                        <td class="AMCA">&nbsp;</td>
                        <td class="UL">&nbsp;</td>
                    </tr>
                    <tr class="ISO AMCA">
                        <td class="Name">Name2</td>
                        <td class="ISO">&#x2713;</td>
                        <td class="AMCA">&#x2713;</td>
                        <td class="UL">&nbsp;</td>
                    </tr>
                    <tr class="ISO AMCA UL">
                        <td class="Name">Name3</td>
                        <td class="ISO">&#x2713;</td>
                        <td class="AMCA">&#x2713;</td>
                        <td class="UL">&#x2713;</td>
                    </tr>
                </tbody>
        </table>
        <script></script>
    </body>

</html>

＆＃13;

Answer 2

演示：https://jsfiddle.net/erkaner/u12te5jb/

这是我的解决方案

$("input[name='filterStatus']").change(function () {

var count1 = $("input[name='filterStatus']:checked").length;//number of checked items

$("#StatusTable>tbody> tr").each(function () {//for each row
    var count2 = 0;//this is the count of td that has ✓ 
    var row = $(this);//the current row
    $("input[name='filterStatus']:checked").each(function () {//for each checked item
        var inputVal = $(this).val();//get the value, which is class of the corresponding td, see below
        if (row.find('.' + inputVal).html().indexOf("✓") >= 0)//if the td that corresponds to the selected checkbox contains ✓
            count2++;//then increase
    });

    if (count1 == count2) //if counts match
        row.show();//then show
    else 
        row.hide();
    });
});

Answer 3

在此下面的代码的帮助下。您可以根据已选中的复选框来过滤表格，而当您未选中任何复选框时，它将显示所有记录。

dput

$(document).ready(function(){
  $(".name").on("click", function() {
  name_list = []
  $("#myTable tr").hide()
  var flag = 1
  $("input:checkbox[name=name]:checked").each(function(){
  		flag = 0;
    	var value = $(this).val().toLowerCase();
      	$("#myTable tr").filter(function() {
            if($(this).text().toLowerCase().indexOf(value) > -1)
        		$(this).show()
    	});
 	 });
    if(flag == 1)
    	$("#myTable tr").show()
  });
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

Answer 4

jQuery Scrollable, Sortable, Filterable table引用了DataTables库，其中https://datatables.net/news/下有一个条目于2019年2月8日：

Yevgen Gorbunkov为DataTables编写了一个非常不错的插件，该插件显示从标头下拉过滤，以允许联合搜索被执行。源在GitHub上可用。

我已将示例从https://jsfiddle.net/ahqso1j5/转换为以下代码段：

// Plug-in source available at:
// https://github.com/ygorbunkov/datatables-multiple-criteria-filter
$(document).ready(function () {
//Source data definition	
var tableData = [{
		name: 'Clark Kent',
		city: 'Metropolis',
		race: 'cryptonian'
	}, {
		name: 'Bruce Wayne',
		city: 'Gotham',
		race: 'human'
	}, {
		name: 'Steve Rogers',
		city: 'New York',
		race: 'superhuman'
	}, {
		name: 'Peter Parker',
		city: 'New York',
		race: 'superhuman'
	}, {
		name: 'Thor Odinson',
		city: 'Asgard',
		race: 'god'
	}, {
		name: 'Jonathan Osterman',
		city: 'New York',
		race: 'superhuman'
	}, {
		name: 'Walter Kovacs',
		city: 'New Jersey',
		race: 'human'
	}, {
		name: 'Arthur Curry',
		city: 'Atlantis',
		race: 'superhuman'
	}, {
		name: 'Tony Stark',
		city: 'New York',
		race: 'human'
	}, {
		name: 'Scott Lang',
		city: 'Coral Gables',
		race: 'human'
	}, {
		name: 'Bruce Banner',
		city: 'New York',
		race: 'superhuman'
	}
];
//DataTable definition	
window.dataTable = $('#mytable').DataTable({
		sDom: 'tF',
		data: tableData,
		columns: [{
				data: 'name',
				title: 'Name'
			}, {
				data: 'city',
				title: 'City'
			}, {
				data: 'race',
				title: 'Race'
		}]
});
});

<!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/ygorbunkov/datatables-multiple-criteria-filter@master/js/mFilter.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ygorbunkov/datatables-multiple-criteria-filter@master/css/mFilter.css">
</head>
<body>
  <table id="mytable"></table>
</body>
</html>

Answer 5

我正在这样做，代码将显示选中的复选框行，

 $('#btnReconcile').click(function () {
            $("#tblReconcilReportDetails>tbody> tr").each(function () {
                var row = $(this);
                var isChecked = $(this).find('td').eq(0).find('input[type="checkbox"].chkReconcil').is(':checked');
                if (isChecked) {
                    row.show();
                } else {
                    row.hide();
                }
            });
        });

带复选框的过滤表

5 个答案: