您好，目前我有这个表过滤器代码，您可以尝试 this fiddle 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="../js/vendor/jquery.js"></script>
<script>
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var text = row.textContent.toLowerCase(),
val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
return {
init: function() {
var inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
var text = $(this).text();
$('input[type=search]').val(text);
$( "#right-label" ).focus();
});
});
</script>
</head>
<body>
Search: <input type="search" class="light-table-filter" data-table="order-table" id="right-label" placeholder="Filter">
<a href="#">Active</a> | <a href="#">Inactive</a> | <a href="#">Banned</a>
<table>
<thead>
<tr>
<th>Name</th>
<th>Contact Number</th>
<th>Course</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Robert</td>
<td>09054848</td>
<td>BSIT</td>
<td>Active</td>
</tr>
<tr>
<td>Mark</td>
<td>5959547</td>
<td>BSA</td>
<td>Inactive</td>
</tr>
<tr>
<td>Doe</td>
<td>5959547</td>
<td>BSA</td>
<td>Banned</td>
</tr>
</tbody>
</table>
</body>
</html>
表格过滤器正在工作，但我想添加文本，当我单击它时，它将成为文本框的值并将过滤表格。我添加的文本是“事件”、“非事件”和“禁止”。如果单击其中之一，它将是输入的值。问题是过滤器代码不适用于该代码。
任何帮助将不胜感激
最佳答案
更新了代码，检查一下 https://jsfiddle.net/kushal812/vwhccu7w/16/
所做的一些更改
var table = $('#mytable')
$('a').click(function (e) {
e.preventDefault();
var text = $(this).text() || "";
table.find('tbody > tr').hide();
$('input[type=search]').val(text);
table.find("." + text.toLowerCase()).removeClass("hidden")
});
关于javascript - 过滤表不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29670097/