前端开发js制作功能强大的表格

前端界面快速开发框架
电商网站前端开发框架
webapp前端开发框架

html 代码

<!DOCTYPE html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title></title>
</head>
<body>
    姓名:<input type=”text” id=”user” placeholder=”请输入姓名”>
    年龄:<input type=”text” id=”xh” placeholder=”请输入年龄” />
    <input type=”button” value=”添加” id=”btn” />
    <input type=”button” value=”搜索” id=”btn1″ />
    <table border=”1″ width=”50%” id=”table”>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>xh001</td>
                <td>王小明</td>
                <td>22</td>
                <td><a href=”javascript:;”>删除</a></td>
            </tr>
            <tr>
                <td>xh001</td>
                <td>王小明</td>
                <td>22</td>
                <td><a href=”javascript:;”>删除</a></td>
            </tr>
            <tr>
                <td>xh001</td>
                <td>王小明</td>
                <td>22</td>
                <td><a href=”javascript:;”>删除</a></td>
            </tr>
            <tr>
                <td>xh002</td>
                <td>刘小芳</td>
                <td>22</td>
                <td><a href=”javascript:;”>删除</a></td>
            </tr>
            <tr>
                <td>xh002</td>
                <td>刘小芳</td>
                <td>22</td>
                <td><a href=”javascript:;”>删除</a></td>
            </tr>
        </tbody>
    </table>
    <script>
        var table = document.getElementById(“table”);
        for (var j = 0; j < table.tBodies[0].rows.length; j++) {
            if (j % 2 == 0) {
                table.tBodies[0].rows[j].style.background = “#ebebeb”;
            }
            else {
                table.tBodies[0].rows[j].style.background = “#ccc”;
            }
        }
        var xh = document.getElementById(“xh”);
        var user = document.getElementById(“user”);
        var btn = document.getElementById(“btn”);
        var btn1 = document.getElementById(“btn1”);
        var num = table.tBodies[0].rows.length;
        //添加查询功能
        btn1.onclick = function () {
            for (var n = 0; n < table.tBodies[0].rows.length; n++) {
                var str1 = table.tBodies[0].rows[n].cells[1].innerHTML.toLowerCase();
                var str2 = user.value.toLowerCase();
                if (str1.search(str2) != -1) {
                    table.tBodies[0].rows[n].style.background = “yellow”;
                }
            }
        };
        //添加点击事件
        btn.onclick = function () {
            //创建行
            var tr = document.createElement(“tr”);
            //创建序号列
            var td1 = document.createElement(“td”);
            td1.innerHTML = ++num;
            //隔行变色功能
            if (num % 2 == 0) {
                tr.style.background = “#ccc”;
            }
            else {
                tr.style.background = “#ebebeb”;
            }
            //创建姓名列
            var td2 = document.createElement(“td”);
            td2.innerHTML = user.value;
            //创建年龄列
            var td3 = document.createElement(“td”);
            td3.innerHTML = xh.value;
            //创建删除列
            var td4 = document.createElement(“td”);
            td4.innerHTML = “<a href=’javascript:;’ >删除</a>”;//点击删除按钮,删除一行
            //添加删除功能
            td4.getElementsByTagName(“a”)[0].onclick = function () {
                table.tBodies[0].removeChild(this.parentNode.parentNode);
            };
            //把行,列添加到表格
            table.tBodies[0].appendChild(tr);
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
        };
        //删除-行
        var arr = [];
        for (var i = 0; i < table.tBodies[0].rows.length; i++) {
            arr.push(table.tBodies[0].rows[i].cells[3].getElementsByTagName(“a”)[0]);
        }
        for (var j = 0; j < arr.length; j++) {
            arr[j].onclick = function () {
                table.tBodies[0].removeChild(this.parentNode.parentNode);
            }
        }
//添加鼠标滑过效果
    </script>
</body>
</html>
web前端页面开发框架
前端开发面试框架问题
前端开发 框架
» 本文来自:前端开发者 » 《前端开发js制作功能强大的表格》
» 本文链接地址:https://www.rokub.com/6264.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!