jquery实现表格数据的动态增删，将input框的数据保存到表格

最新推荐文章于 2022-09-15 13:07:19 发布

一个平平无奇的小高

最新推荐文章于 2022-09-15 13:07:19 发布

阅读量814

点赞数

分类专栏： JQuery 文章标签： jquery js html5 css3 javascript

本文链接：https://blog.csdn.net/qq_44646343/article/details/109122049

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

通过jquery实现对表格数据的操作，实现数据的增加，删除以及对input框输入内容的保存。

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点操作</title>
    <script src="./js/jquery.min.js"></script>
    <style>
        #table1 {
            width: 600px;
            margin: 100px auto;
            text-align: center;
        }

        input {
            width: 120px;
            height: 22px;
            display: block
        }
    </style>
    <script>
        $(function () {
            //添加
            $(".add").click(function () {
                $(`<tr>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td>
                        <button class="del">删除</button>
                    </td>
                    <td>
                        <button class="save">保存</button>
                    </td>
                </tr>`).appendTo("#table1");
            })

            //删除
            $("table#table1").on("click", ".del", function () {
                $(this).parent().parent().remove();
                //或者 $(this).parents("tr").remove();
            })

            //保存
            $("table#table1").on("click", ".save", function () {
                var tds = $(this).parent().parent().find("td");

                tds.each(function (index) {
                    var inp = tds.eq(index).find("input");
                    var inp_val = inp.val();
                    inp.hide();
                    tds.eq(index).html(inp_val);
                })
                //或者
                // for(var i = 0; i < tds.length; i++){
                //     var inp = tds.eq(i).find("input");
                //     var inp_val = inp.val();
                //     inp.hide();
                //     tds.eq(i).html(inp_val);
                // }
            })

        })

    </script>
</head>

<body>
    <table id="table1" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="5">
                <button class="add">添加</button>
            </td>
        </tr>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>班级</td>
            <td colspan="2">操作</td>
        </tr>
    </table>
</body>

</html>

效果：
在这里插入图片描述

一个平平无奇的小高

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
jquery实现表格数据的动态增删，将input框的数据保存到表格

通过jquery实现对表格数据的操作，实现数据的增加，删除以及对input框输入内容的保存。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>节点操作</title&
复制链接

扫一扫