【www.bbyears.com--js教程】
js 对 table 的操作除了增删之外,还可以进行 table 表格数据的搜索,看来就差连接数据库了,如果 js 可以连接数据库的话,相信也是一个不错的语言了,呵呵,对于 table 表格的搜索原理也是对各个节点的操作,还利用 js 分割,js 数组比较,等函数,好了,还是老样子,先看如下的实例图片:
实例代码如下所示:
<script>
window.onload = function () {
var oTab = document.getElementById("tab1");
var tBody = oTab.getElementsByTagName("tbody")[0];
var btn2 = document.getElementById("btn2");
var search = document.getElementById("search");
btn2.onclick = function () {
//search()找到并返回字符串出现的位置,如果没有,返回-1
for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
var tableRow = tBody.rows[i].cells[1].innerHTML.toLowerCase();//toLowerCase 不区分大小写,转成全小写
var searchRows = search.value.toLowerCase(); //xiariboke.com
var arr = searchRows.split(" ");//分割关键字
tBody.rows[i].style.background = "";
for (var j = 0; j < arr.length; j++) {//多个关键字搜索用此循环
//if (tableRow == searchRows) {//简单全字搜索
//if (tableRow.search(searchRows) != -1)//用seach方法模糊搜索
if(tableRow.search(arr[j])!=-1)//多个关键字搜索
{
tBody.rows[i].style.background = "yellow";
}
else {
}
}
}
};
};
</script>
ID
姓名
年龄
1
Blue
27
2
张三
23
3
李四
28
4
张伟
28
到现在为止 js dom 的部分已经学完了,接下来应该学习 js 运动基础了。