[英]Show hidden tables until search button clicked
I have a search box that makes a request within a table and displays the queried results. 我有一个搜索框,该搜索框在表中发出请求并显示查询的结果。
I want the tables to remain hidden until the user starts the search. 我希望表保持隐藏状态,直到用户开始搜索为止。
HTML 的HTML
<section class="container">
<input type="search" class="table-filter" data-table="order-table" placeholder="Filter" >
<table class="order-table table">
<tbody>
<tr>
<td>John</td>
<td>john.doe</td>
</tr>
<tr>
<td>Jane Vanda</td>
<td>jane@vanda</td>
</tr>
<tr>
<td>Alferd Penyworth</td>
<td>alfred</td>
</tr>
</tbody>
</table>
JS JS
(function(document) {
'use strict';
var TableFilter = (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('table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
TableFilter.init();
}
});
})(document);
Try it. 试试吧。
(function(document) {
'use strict';
var TableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
/* New code here */
table.style.display = _input.value.length > 0 ? 'table' : 'none'; // Or inline maybe.
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('table-filter');
Arr.forEach.call(inputs, function(input) {
/* New code here */
var tables = document.getElementsByClassName(input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
table.style.display = 'none';
});
/* */
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
TableFilter.init();
}
});
})(document);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.