Jquery之动态操作table_jq 动态操作table-优快云博客

本文介绍如何利用jQuery实现HTML表格的动态增加与删除行功能。通过编写JavaScript代码，当用户输入用户名和密码并点击“增加”按钮时，会在表格中新增一行；点击新增行中的“删除”按钮，则会移除该行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先创建test.html文件，内容如下：
这里用的jQuery版本是jquery-1.8.2.js,

点击下载jquery-1.8.2.js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 
  </head>
  <body>
    <table id="tableID" border="1" align="center" width="60%">
        <thead>
            <tr>    
                <th>用户名</th>
                <th>密码</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbodyID">
            <!-- 动态增加行 
            <tr>
                <td>哈哈</td>
                <td>123</td>
                <td><input type="button" value="删除" onclick=""/></td>
            </tr>
            -->
        </tbody>
    </table>

    <hr/>
    用户名：<input type="text" id="usernameID"/>
    密码：  <input type="text" id="passwordID"/>
            <input type="button" value="增加" id="addID"/>

  </body>

  <script type="text/javascript">
        //定位"增加"按钮，同时添加单击事件
        $("#addID").click(function(){
            //获取用户名和密码的值
            var username = $("#usernameID").val();
            var password = $("#passwordID").val();
            //去掉二边的空格
            username = $.trim(username);
            password = $.trim(password);
            //如果用户名或密码没有填
            if(username.length == 0 || password.length == 0){
                //提示用户                  
                alert("用户名或密码没有填");
            }else{
                //创建1个tr标签
                var $tr = $("<tr></tr>");
                //创建3个td标签
                var $td1 = $("<td>"+username+"</td>");
                var $td2 = $("<td>"+password+"</td>");
                var $td3 = $("<td></td>");
                //创建input标签，设置为删除按钮
                var $del = $("<input type='button' value='删除'>");
                //为删除按钮动态添加单击事件
                $del.click(function(){
                    //删除按钮所有的行，即$tr对象
                    $tr.remove();
                });
                //将删除按钮添加到td3标签中
                $td3.append($del);
                //将3个td标签依次添加到tr标签中
                $tr.append($td1);
                $tr.append($td2);
                $tr.append($td3);
                //将tr标签添加到tbody标签中
                $("#tbodyID").append($tr);
                //清空用户名和密码文本框中的内容
                $("#usernameID").val("");
                $("#passwordID").val("");
            }
        });
  </script>

</html>
效果如下：