javascript 对表格的简单操作-优快云博客

本文通过一个简单的示例展示了如何使用JavaScript实现HTML表格的数据添加、删除及搜索功能。具体包括利用DOM操作动态创建表格行及单元格，并实现基于多个关键词的模糊搜索功能。
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title></title>
    <script type="text/javascript">
        window.onload = function() {
            //添加
            var oName = document.getElementById("name");
            var oAge = document.getElementById("age");
            var oBtn = document.getElementById("btn1");
            var oTab = document.getElementById("tab1");

            var id = oTab.tBodies[0].rows.length+1;

            oBtn.onclick = function() {
                var oTr = document.createElement("tr");

                var oTd = document.createElement("td");
                oTd.innerHTML = id++;
                oTr.appendChild(oTd);

                var oTd = document.createElement("td");
                oTd.innerHTML = oName.value;
                oTr.appendChild(oTd);

                var oTd = document.createElement("td");
                oTd.innerHTML =oAge.value;
                oTr.appendChild(oTd);

                var oTd = document.createElement("td");
                oTd.innerHTML = "<a href='javascript:;'>删除</a>";
                oTr.appendChild(oTd);

                oTd.getElementsByTagName("a")[0].onclick = function() {
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode );
                };
                oTab.tBodies[0].appendChild(oTr);
            };

            //搜索
            var oTxt = document.getElementById("txt");
            var oBtn2 = document.getElementById("btn2");

            oBtn2.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 = oTxt.value.toLowerCase();        //toLowerCase全部转换成小写查询，用于忽略大小写

                    var arr = sTxt.split(" ");   //多关键词搜索  中间用空格隔开“split里面有个空格”

                    oTab.tBodies[0].rows[i].style.display = "none";    //全部隐藏

                    for(var j=0; j<arr.length; j++) {
                        //sTab.search(sTxt) != -1 模糊搜索。search用于找到并且返回字符串出现的位置，如果没有则返回-1
                        if(sTab.search(arr[j]) != -1){
                            oTab.tBodies[0].rows[i].style.display = "block";  //将符合条件的选出来并显示
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
姓名：<input id="name" type="text"/>
年龄：<input id="age" type="text"/>
<button id="btn1">添加</button>
姓名：<input id="txt" type="text"/>
<button id="btn2">搜索</button>
<table id="tab1" border="1" style="width: 500px" >
    <thead>
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张伟</td>
            <td>25</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>牛二</td>
            <td>25</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>张三</td>
            <td>25</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>李四</td>
            <td>25</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>王五</td>
            <td>25</td>
            <td></td>
        </tr>
        <tr>
            <td>6</td>
            <td>陈五</td>
            <td>25</td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">随便来点什么就好</td>
        </tr>
    </tfoot>
</table>
</body>
</html>
转载于:https://my.oschina.net/HaoLuo/blog/205823