问题描述
这就是我正在使用的。
希望有人可以帮助我解决这个问题,除了一部分以外,我可以按自己的需要进行工作。
当用户开始使用退格键从输入中删除电话号码时,所有表条目都开始显示,我希望它们被隐藏,就像页面加载时一样。
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
console.log(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) {
if(e.code === "Backspace"){
Arr.forEach.call(tbody.rows,_defaultfilter);
}else{
Arr.forEach.call(tbody.rows,_filter);
}
});
});
}
function _defaultfilter(row) {
console.log(row);
var text = row.textContent.toLowerCase(),val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
function _filter(row) {
console.log(row);
var text = row.textContent.toLowerCase(),val = _input.value.toLowerCase();
console.log(_input.value);
if(val.length >= 10){
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.addEventListener("keyup",_onInputEvent);
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange',function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
#tableStyle {
border-collapse: collapse;
width: 100%;
}
#tableStyle td,#tableStyle th {
border: 1px solid #ddd;
padding: 8px;
}
#tableStyle tr:nth-child(even){background-color: #f2f2f2;}
#tableStyle tr:hover {background-color: #ddd;}
#tableStyle th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
.hiderow{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<section class="container">
<h1>Wireless Eligibility Search</h1>
<input type="search" id="myInput" class="light-table-filter" data-table="order-table" placeholder="">
<span style="color: gray">ex:6473885095</span>
<p> </p>
<table cellpadding="5" cellspacing="5" style="border: 1px solid black" class="order-table table" id="tableStyle">
<thead>
<tr>
<th>Phone Number</th>
<th>IEMI</th>
<th>Provider</th>
<th>Upgrade Date</th>
<th>Cancellation Fee</th>
</tr>
</thead>
<tr style="display:none" class="row">
<td>14555242043</td>
<td>z3.5er8nm7ir0qe9wrEet</td>
<td>Bell</td>
<td>22-Aug-20</td>
<td>0</td>
</tr>
<tr style="display:none" class="row">
<td>13125055491</td>
<td>a3.5tr6nm0to8zc1xvE</td>
<td>Rogers</td>
<td>31-Oct-20</td>
<td>256</td>
</tr>
<tr style="display:none" class="row">
<td>15855992048</td>
<td>s3.5ytah3yp8ad8sf8dgE</td>
<td>Bell</td>
<td>25-Mar-20</td>
<td>0</td>
</tr>
<tr style="display:none" class="row">
<td>14165537459</td>
<td>d3.5uy8sj6jp8eg3rhE</td>
<td>Telus</td>
<td>15-Jan-21</td>
<td>400</td>
</tr>
<tr style="display:none" class="row">
<td>19553550083</td>
<td>f3.5iu6dk4hy3gh4hjE</td>
<td>Telus</td>
<td>17-Jul-21</td>
<td>800</td>
</tr>
<tr style="display:none" class="row">
<td>16473885095</td>
<td>g3.5oi6fl4g;3hq4hwE</td>
<td>Telus</td>
<td>17-Jul-21</td>
<td>800</td>
</tr>
</table>
<p> </p>
</section>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)