jQuery实现动态添加删除表格的行

C币贫困户

2024-04-03 帮助26人

方法一：使用click补绑

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        #tab{
            width: 500px;
            height: 200px;
            border-spacing: 0;
            border-collapse: collapse;
            border:  black solid;
            text-align: center;
        }
        #tab tr,#tab td,#tab th{
            border:  black solid;

        }

    </style>
    <script type="text/javascript" src="JS/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //定义点击函数
            var delFun=function (){
                var na = $(this).parent().children().eq(0).text();
                if (confirm("是否删除[" na ']')){
                    $(this).parent().remove();
                }
            }
            //绑定删除点击事件
            $(".del").click(delFun);
            //添加行
            $("#submit").click(function (){
                var name = $("#name").val();
                var age = $("#age").val();
                var sex = $("#sex").val();
                 $('<tr>' ' <td>' name '</td>' ' <td>' age '</td>' ' <td>' sex '</td>' '<td class="del">删除</td>' '</tr>').appendTo("#tab");
                 //为添加的行，绑定点击事件
                $(".del:last").click(delFun);
            })
        })

    </script>
</head>
<body>
<div style="margin-left: 35%;">
<table id="tab">
    <tr>
        <th>name</th>
        <th>age</th>
        <th>sex</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
        <td class="del">删除</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>19</td>
        <td>女</td>
        <td class="del">删除</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>20</td>
        <td>女</td>
        <td class="del">删除</td>
    </tr>
</table>
</div>
<div style="border: black solid 1px;margin-top: 50px;width: 60%;margin-left: 20%">
    <table style="margin-left: 20%">
        <tr>
            <td>name:</td>
            <td><input type="text" id="name"></td>
        </tr>
        <tr>
            <td>age:</td>
            <td><input type="text" id="age"></td>
        </tr>
        <tr>
            <td>sex:</td>
            <td><input type="text" id="sex"></td>
        </tr>
    </table>
    <button style="margin-left: 40%" id="submit">submit</button>
</div>
</body>
</html>

方法二：使用.on绑定

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        #tab{
            width: 500px;
            height: 200px;
            border-spacing: 0;
            border-collapse: collapse;
            border:  black solid;
            text-align: center;
        }
        #tab tr,#tab td,#tab th{
            border:  black solid;

        }

    </style>
    <script type="text/javascript" src="JS/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //绑定删除点击事件
            $(document).on("click",".del",function (){
                var na = $(this).parent().children().eq(0).text();
                if (confirm("是否删除[" na ']')){
                    $(this).parent().remove();
                }
            })
            //添加行
            $("#submit").click(function (){
                var name = $("#name").val();
                var age = $("#age").val();
                var sex = $("#sex").val();
                $('<tr>' ' <td>' name '</td>' ' <td>' age '</td>' ' <td>' sex '</td>' '<td class="del">删除</td>' '</tr>').appendTo("#tab");
            })
        })

    </script>
</head>
<body>
<div style="margin-left: 35%;">
    <table id="tab">
        <tr>
            <th>name</th>
            <th>age</th>
            <th>sex</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
            <td class="del">删除</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>19</td>
            <td>女</td>
            <td class="del">删除</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>20</td>
            <td>女</td>
            <td class="del">删除</td>
        </tr>
    </table>
</div>
<div style="border: black solid 1px;margin-top: 50px;width: 60%;margin-left: 20%">
    <table style="margin-left: 20%">
        <tr>
            <td>name:</td>
            <td><input type="text" id="name"></td>
        </tr>
        <tr>
            <td>age:</td>
            <td><input type="text" id="age"></td>
        </tr>
        <tr>
            <td>sex:</td>
            <td><input type="text" id="sex"></td>
        </tr>
    </table>
    <button style="margin-left: 40%" id="submit">submit</button>
</div>
</body>
</html>

学新通

这篇好文章是转载于：学新通技术网

jQuery实现动态添加删除表格的行

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开