javascript学习指南|Javascript实现表格搜索数据的例子

更新时间:2020-10-16    来源:js教程    手机版     字体:

【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 运动基础了。

本文来源:http://www.bbyears.com/wangyezhizuo/105058.html

热门标签

更多>>

本类排行