表格的搜索:

  • 先要做个基础的搜索的版本–字符串比较
  • 忽略大小写–大小写转换
  • 模糊搜索–search的使用
  • 多选关键词—split
  • 显示方式:高亮显示7和筛选

 

开始先实现功能:

思路:给button加上一个onclick;然后循环每一行第一个单元格的innerHTML,如果和oName.value相等,就执行语句:让这一行的背景颜色变成黄色;

oBtn.onclick=function()
{
for (var i=0; i<oTab.tBodies[0].rows.length;i++)
{
if(oTab.tBodies[0].rows[i].cells[1].innerHTML==oName.value)
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
}
}

这时候有个小问题,就是第一次搜索后高亮,第二次搜索的还会高亮,但是以前搜索出来的高亮结果不消失;

然后我们需要用else取消下不是结果的background;

oBtn.onclick=function()
{
for (var i=0; i<oTab.tBodies[0].rows.length;i++)
{
if(oTab.tBodies[0].rows[i].cells[1].innerHTML==oName.value)
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
else
{
oTab.tBodies[0].rows[i].style.background='';
}
}
}

这样就可以完成第一阶段的功能了;全局代码是:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload= function ()
{
var oTab=document.getElementById('tab1');
var oName=document.getElementById('name');
var oBtn=document.getElementById('btn1');

oBtn.onclick=function()
{
for (var i=0; i<oTab.tBodies[0].rows.length;i++)
{
if(oTab.tBodies[0].rows[i].cells[1].innerHTML==oName.value)
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
else
{
oTab.tBodies[0].rows[i].style.background='';
}
}
}
}

</script>
</head>
<body>
姓名:<input id="name" type="text"/>
<input id="btn1" type="button"value="搜索"/>
<table id="tab1" border="1px" width="500px">
<thead>
<td>ID</td>
<td>name</td>
<td>ages</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>broszhu</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>zhu</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>smile</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>bro</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>alice</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>alian</td>
<td>26</td>
<td></td>
</tr>
</tbody>
</table>

</body>
</html>

然后再实现忽略大小写,可以直接不用完全一样就可以搜出来;

思路:声明2个变量,一个存搜出的结果;一个存输入的结果;然后把两个变量都转成小写,然后再进行比较:

var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML;
var sTxt=oName.value;
oBtn.onclick=function()
{
for (var i=0; i<oTab.tBodies[0].rows.length;i++)
{
var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML;
var sTxt=oName.value;
if(sTab.toLowerCase()==sTxt.toLowerCase())
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
else
{
oTab.tBodies[0].rows[i].style.background='';
}
}
}

这样我们第二阶段的功能就完成了;然后再进行第三阶段的代码;实现模糊搜索的功能;

为了方便书写,我们把toLowerCase()放到上面去;形势如下:

var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt=oName.value.toLowerCase();

然后我们用XXX.search(SSSS)!=-1来判断;

if(sTab.search(sTxt)!=-1)

最终的代码就是:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload= function ()
{
var oTab=document.getElementById('tab1');
var oName=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();
var sTxt=oName.value.toLowerCase();
if(sTab.search(sTxt)!=-1)
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
else
{
oTab.tBodies[0].rows[i].style.background='';
}
}
}
}

</script>
</head>
<body>
姓名:<input id="name" type="text"/>
<input id="btn1" type="button"value="搜索"/>
<table id="tab1" border="1px" width="500px">
<thead>
<td>ID</td>
<td>name</td>
<td>ages</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>broszhu</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>zhu</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>smile</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>bro</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>alice</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>alian</td>
<td>26</td>
<td></td>
</tr>
</tbody>
</table>

</body>
</html>

这样就有模糊搜索的功能了;第三阶段的功能就写完了;然后我们再做个多选关键词的功能;我们百度搜索东西,经常用空格来搜多个关键词;

思路:我们用split来完成;

先声明一个函数,用split通过空格把输入的数组分成一个数组;然后让表格的行无论什么时候都是空的。然后循环这个数组的length,只要搜索出来的结果!=-1,说明就找到了,然后就给行加本经;

var arr=sTxt.split(' ');//把输入的文字切成一个数组;
oTab.tBodies[0].rows[i].style.background='';//让格式无论什么时候都是空的;

全局函数如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload= function ()
{
var oTab=document.getElementById('tab1');
var oName=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();
var sTxt=oName.value.toLowerCase();

var arr=sTxt.split(' ');//把输入的文字切成一个数组;
oTab.tBodies[0].rows[i].style.background='';//让格式无论什么时候都是空的;

for(var j=0;j<arr.length;j++)
{
if(sTab.search(arr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
}
}
}
}

</script>
</head>
<body>
姓名:<input id="name" type="text"/>
<input id="btn1" type="button"value="搜索"/>
<table id="tab1" border="1px" width="500px">
<thead>
<td>ID</td>
<td>name</td>
<td>ages</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>broszhu</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>zhu</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>smile</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>bro</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>alice</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>alian</td>
<td>26</td>
<td></td>
</tr>
</tbody>
</table>

</body>
</html>

搜索结果的显示有两种;一种是高亮显示;还有一种是筛选;

高亮就是结果用背景或者别的样式显示,就像刚才的background;

然后再做个筛选;

只需要把刚才的背景转换成display的代码即可;

把原来的代码:

oTab.tBodies[0].rows[i].style.background='';//让格式无论什么时候都是空的;

for(var j=0;j<arr.length;j++)
{
if(sTab.search(arr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
}

换成

oTab.tBodies[0].rows[i].style.display='none';//让格式无论什么时候都是空的;

for(var j=0;j<arr.length;j++)
{
if(sTab.search(arr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.display='block';
}
}

最最终的代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload= function ()
{
var oTab=document.getElementById('tab1');
var oName=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();
var sTxt=oName.value.toLowerCase();

var arr=sTxt.split(' ');//把输入的文字切成一个数组;
oTab.tBodies[0].rows[i].style.display='none';//让格式无论什么时候都是空的;

for(var j=0;j<arr.length;j++)
{
if(sTab.search(arr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.display='block';
}
}
}
}
}

</script>
</head>
<body>
姓名:<input id="name" type="text"/>
<input id="btn1" type="button"value="搜索"/>
<table id="tab1" border="1px" width="500px">
<thead>
<td>ID</td>
<td>name</td>
<td>ages</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>broszhu</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>zhu</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>smile</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>bro</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>alice</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>alian</td>
<td>26</td>
<td></td>
</tr>
</tbody>
</table>

</body>
</html>

······