jQuery实现增删改查（功能具体实现）

文章目录

- 网页显示
- 代码实现
- 常见问题

网页显示

整体样式

添加

添加一个王五，薪为5000

点击添加按钮，即可吧数据添加到table

删除

点击功能区的删除a标签

提示信息，点击确认删除成功

查询

这个查询是一个依据indexof的模糊查询

输入字符点击搜索，即可匹配显示，没有东西时点击搜索，可以查询全部

修改

点击修改按钮，将tr的内容转化为input标签里面的内容

这里吧9000改为1000

同时修改按钮消失，保存按钮显示

保存

点击保存按钮，保存更改的信息，同时保存按钮消失，修改按钮显示

基本功能如上；

代码实现

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        th,
        tr {
            border-collapse: collapse;
            border-spacing: 0;
        }

        table {
            width: 50%;
        }

        td,
        th {
            border: 1px solid #bcbcbc;
            width: 150px;
            padding: 5px;
        }

        th {
            background: white;
            text-align: center;

        }

        tr:nth-of-type(odd) {
            /* odd是 */
            background: #aaffff;
        }

        tr:nth-of-type(even) {
            background: #aaff7f;
        }
    </style>
    <script src="./js/jquery-3.7.1.js"></script>
    <script>
        $(function () {
            //删除
            $("table").on('click','.delete_btn',function () {
                //判断
                if (confirm("是否确定删除?")) {
                    $(this).parent().parent().remove();
                }
            });
            //查询
            $("#select").click(function () {
                //先获取input的内容
                var input = $(this).prev().val();
                //然后将table中tr下标大于0的遍历
                $("table tr:gt(0)").each(function () {
                    //find()获得当前元素集合中每个元素的后代
                    //获得第二列td的名字集合
                    var name = $(this).find("td:eq(1)").html();
                    alert(name);
                    //判断td下标等于1的数据里是否包含输入框的内容
                    if (name.indexOf(input) == -1) {
                        $(this).hide();
                    } else {
                        $(this).show();
                    }
                });
            });
            //增加
            $("#insert").on("click",function () {
                //先得到id
                var id = parseInt($("table tr:last td:first").html());
                id += 1;
                //得到name和age
                //prev()获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。
                var name = $(this).prev().prev().val();
                var age = $(this).prev().val();
                if (name != "" && age != "") {
                    var trs = "<tr><td>" + id + "</td><td>" + name + "</td><td>" + age + "</td><td><a href='#' style='display: none;' class='save_btn'>保存</a><a href='#' class='update_btn'>修改</a>&nbsp;&nbsp;&nbsp;<a href='#' class='delete_btn'>删除</a></td></tr>";
                    $("table").append(trs);
                    var name = $(this).prev().prev().val("");
                    var age = $(this).prev().val("");
                } else {
                    confirm("请补全信息");
                }
            });
            //修改
            $("table").on('click','.update_btn',function () {
                //现将按钮切换
                $(this).hide();
                $(this).prev().show();
                // 找到下标小于3的td
                var tds = $(this).parent().parent().find("td:lt(3)");
                //将下标小于3的td遍历
                $(tds).each(function () {
                    //设置为输入框
                    var input = "<input type='text' value = '" + $(this).html() + "'>"
                    $(this).html(input);
                });

            });
            //保存
            $("table").on('click','.save_btn',function () {
                //得到input框
                var tds = $(this).parent().parent().find("td:lt(3) input");
                var flag = true;
                //遍历
                $(tds).each(function () {
                    if ($(this).val() == "") {
                        flag = false;
                    }
                });
                if (!flag) {
                    confirm("请补全内容");
                    return;
                }
                //如果flag为true
                $(tds).each(function () {
                    $(this).parent().html($(this).val());
                })
                $(this).hide();
                $(this).next().show();
                //前面的同辈prve//后面的同辈next
            });
        });

    </script>
</head>

<body>
    <p>
        <input type="text">
        <a href="#" id="select">查询</a>
    </p>
    <table border="1" id="table">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>薪水</th>
            <th>功能</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>8000</td>
            <td>
                <a href="#" class="save_btn" style="display: none;">保存</a>
                <a href="#" class="update_btn">修改</a>
                &nbsp;&nbsp;&nbsp;<a href="#" class="delete_btn">删除</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李世</td>
            <td>9000</td>
            <td>
                <a href="#" class="save_btn" style="display: none;">保存</a>
                <a href="#" class="update_btn">修改</a>&nbsp;&nbsp;&nbsp;
                <a href="#" class="delete_btn">删除</a>
            </td>
        </tr>
    </table>
    <input type="text">
    <input type="text">
    <input type="button" value="添加" id="insert">
</body>

</html>

常见问题

一、jquery插件

使用 jQuery，您需要下载 jQuery 库，然后把它包含在希望使用的网页中。

jQuery 库：jQuery数据库，点击下载，不知道下载第几个的下载第一个即可，下载时，右键需要的jQuery，将他另存为到桌面，然后引用到文件中调用

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

<head>
//在相同目录下时
<script src="jquery.js"></script>
</head>

二、添加的数据不能修改删除

对于新添加的数据，我们对他的方法添加有两种方法

1.复制一行，同时复制上一行的方法属性

2.使用$("父级").on("click","方法名"，function（）{});