javascript表格实现模糊查询
相关知识
- toLowerCase()实现查询不区分大小写
- search()用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
var par="hello word";
console.log(par.search("he"));如果找到匹配字符串，返回匹配字符串的索引，如果没有找到任何匹配的字符串，则返回-1。
- split()拆分字符串为数组
var str="abc 123 ert";
var arr=str.split(" ");代码实现
<!DOCTYPE html>
<html>
<head>
<title>表格的模糊搜索</title>
<style>
table{
border-top:1px solid #dcdee2;
border-left: 1px solid #dcdee2;
border-collapse: collapse;
border-spacing: 0;
}
table td,table th{
border-right: 1px solid #dcdee2;
border-bottom: 1px solid #dcdee2;
width: 400px;
height: 30px;
line-height: 30px;
text-align: center;
}
table th{
background: #f8f8f9;
}
</style>
<script>
// 一般搜索都是由后台完成的，我们在于思想本身
window.onload=function(){
var oTab=document.getElementById("tab1");
var oTxt=document.getElementById("name");
var oBtn=document.getElementById("btn1");
oBtn.onclick=function(){
for(var i=0; i<oTab.tBodies[0].rows.length; i++){
var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();//toLowerCase()实现忽略大小写搜索
var sTxt=oTxt.value.toLowerCase();
var arr=sTxt.split(" ");//用空格或逗号拆输入的关键字，实现多字符搜索
// oTab.tBodies[0].rows[i].style.background="";//高亮查询
oTab.tBodies[0].rows[i].style.display="none"
for(var j=0; j<arr.length; j++){
if(sTab.search(arr[j])!=-1){//search实现模糊搜索
// oTab.tBodies[0].rows[i].style.background="green";//高亮查询
oTab.tBodies[0].rows[i].style.display="block";//非高亮展示，筛选展示
}
}
}
}
}
</script>
</head>
<body>
<input type="text" id="name" />
<input type="button" id="btn1" value="搜索">
<table id="tab1">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Amy</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>26</td>
</tr>
<tr>
<td>4</td>
<td>王六</td>
<td>26</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计3条</td>
</tr>
</tfoot>
</table>
</body>
</html>总结
平时页面中用到的搜索都是后台提供，这里只整理下搜索的思路供参考。
相关推荐
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16
行吟阁 2020-08-09
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
swiftwwj 2020-07-05
pythonclass 2020-06-25
nercon 2020-06-14
玫瑰小妖 2020-06-07
pythonclass 2020-06-03
lyg0 2020-05-28
huzijia 2020-05-08
行吟阁 2020-05-11
黎豆子 2020-05-11
玫瑰小妖 2020-05-11
HSdiana 2020-05-10
黎豆子 2020-05-08