JS添加删除表格行实现-优快云博客

本文链接：https://blog.youkuaiyun.com/jnshunsheng/article/details/7591372

本文介绍如何使用JavaScript实现添加和删除表格行的功能，通过创建动态的HTML元素和事件监听来实现实时交互。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JS添加删除行</title>
    <script type="text/javascript">
        //行号，用来标识唯一
        var rowCount = 0;
        //添加行
        function AddRow() {
            rowCount++;
            // 行
            var tr = document.createElement("tr");
            tr.id = SetName("tr_Info");
            //姓名
            var tdName = document.createElement("td");
            tdName.id = SetName("td_Name");
            tdName.innerHTML = "<input type='text' id='" + SetName('txtName') + "'>";
            //操作
            var tdOP = document.createElement("td");
            tdOP.id = SetName("td_op");
            tdOP.innerHTML = "<input type='button' id='" + SetName('btnDelRow') + "' onclick='DeleteRow(" + rowCount + ")' value='删除'>";
            tr.appendChild(tdName);
            tr.appendChild(tdOP);
            document.getElementById("tblDemo").appendChild(tr);

        }
        //获取名称与行号对应
        function SetName(src) {
            return src + rowCount;
        }
        //删除行
        function DeleteRow(rowIndex) {
            //获取行
            var currentRow = document.getElementById("tr_Info" + rowIndex);
            //获取表格
            document.getElementById("tblDemo").removeChild(currentRow);
        }


    </script>
</head>
<body>
<div>
    <input type="button" value="添加" id="btnAdd" onclick="AddRow();" />
    <table id="tblDemo">
    <tr id="tr_Title">
    <td id='td_Ttitle_Name'>姓名</td>

    <td id="td_Title_Op">操作</td>
    </tr>

    </table>
    </div>
</body>
</html>