jquery 给表格添加或删除一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <title>test</title>
    <style>
        
    </style>
</head>
<body>
        <table class="my_table">
            <thead class="my_thead">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>

            <tbody class="my_tbody" id="tb1">
                <tr id="1">
                    <td>001</td>
                    <td>张三</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>张三</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>张三</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>

        <button id="btn">添加</button>

        <script>
                // 删除id==1的这一行:用remove()方法
                $("#1").remove();


                // 当点击 “添加” 按钮时,给id==tb1的tbody添加一行:"<tr><td>004</td><td>张三</td><td>20</td></tr>"
                $("#btn").click(function(){
                    $("#tb1").append("<tr><td>004</td><td>张三</td><td>20</td></tr>");
                });
            
        </script>
</body>
</html>

 

posted @ 2023-05-20 00:00  映辉  阅读(125)  评论(0)    收藏  举报