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 @   映辉  阅读(112)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示