提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery下table操作示例(附案例源码)

jQuery案例源码 操作 示例 Table
2023-09-14 09:05:03 时间

练习效果：(仅用于技术点练习)

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script>
        //删除
        function del(o) {
            $(o).parent().parent().remove();
        }
        //修改
        function update(o) {
            if ($(o).text() == "修改") {
                $(o).text("保存");
                var c = $(o).parent().prevAll();
                var chang = $(o).parent().prevAll().length;
                for (var i = 0; i < chang; i++) {
                    var text = c[i].textContent;
                    c[i].innerHTML = "<input type='text' value='" + text + "'/>";
                }
            } else if ($(o).text() == "保存") {
                $(o).text("修改");
                var c = $(o).parent().prevAll();
                var chang = $(o).parent().prevAll().length;
                for (var i = 0; i < chang; i++) {
                    c[i].innerHTML = $(c[i]).children().val();
                }
            }
        }
        //添加
        function add() {
            //复制元素clone
            var c = $("tr:eq(1)").clone();
            //添加到table的最后
            c.appendTo($("table"));
        }
        //查询
        function find() {
            //需要查询的内容
            var cha = $("#cha").val();
            if (cha != "") {
                var result = "";
                var list = $("tr:gt(0)");
                for (var i = 0; i < list.length; i++) {
                    if ($(list[i]).children()[0].textContent == cha) {
                        result = $(list[i]).clone();
                    }
                }
                if (result != "") {
                    $("tr:gt(0)").hide();
                    result.appendTo($("table"));
                }
            } else {
                window.location.reload();
            }
        }
    </script>
</head>

<body>
    <a href="#" onclick="add()">添加</a>
    <input type="text" id="cha" /><a href="#" onclick="find()">查询</a>
    <table border="1">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>薪水</td>
            <td>功能</td>
        </tr>
        <tr>
            <td>1</td>
            <td>李宁</td>
            <td>10000</td>
            <td>
                <a href="#" onclick="update(this)">修改</a>
                <a href="#" onclick="del(this)">删除</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>小灰灰</td>
            <td>12000</td>
            <td>
                <a href="#" onclick="update(this)">修改</a>
                <a href="#" onclick="del(this)">删除</a>
            </td>
        </tr>

    </table>
</body>

</html>

希望能对大家有所帮助，欢迎一键三连。

相关文章