使用纯JavaScript实现动态表格行的增删改查（CRUD）功能-html教程-PHP中文网

使用纯javascript实现动态表格行的增删改查（crud）功能

本教程详细介绍了如何使用纯JavaScript在网页中实现对动态生成表格行的添加、编辑和删除（CRUD）功能。我们将重点讲解编辑功能的实现原理，包括如何将表格单元格内容转换为可编辑的输入框，并在保存时更新数据，提供完整的代码示例和注意事项，帮助开发者纯前端实现数据管理。

1. 引言：动态表格操作的必要性

在现代Web应用中，动态地展示和管理数据是常见的需求。用户可能需要实时地添加新数据、修改现有记录或删除不再需要的信息，而这一切都可以在不刷新页面的情况下通过前端JavaScript实现。本教程将引导您使用纯JavaScript构建一个具备完整增删改查（CRUD）功能的动态表格。

2. 初始HTML结构与表格生成

首先，我们需要一个基本的HTML表格结构来承载数据。在这个示例中，我们将使用JavaScript动态地创建表格及其初始行。这种方法虽然在大型应用中可能不是最佳实践（通常会直接在HTML中定义骨架或使用模板引擎），但对于演示纯JavaScript操作DOM非常有效。

<!DOCTYPE html>
<html>
<head>
    <title>动态表格CRUD</title>
    <style>
        table {
            border-collapse: collapse;
            width: 500px;
            margin: 20px;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        .save {
            display: none; /* 初始时隐藏保存按钮 */
        }
        input[type="text"] {
            width: 90%; /* 使输入框适应单元格宽度 */
        }
    </style>
</head>
<body>
    <script>
        // 使用 document.write 动态生成表格
        document.write("<table id='TABLE' border='1' width='500'>");
        document.write("<tr>");
        document.write("<td>ID</td>");
        document.write("<td>Name</td>");
        document.write("<td>Address</td>");
        document.write("<td>Age</td>");
        document.write("<td>Action</td>");
        document.write("</tr>");

        // 示例数据行
        document.write("<tr id='row1'>");
        document.write("<td id='id_row1'>1</td>");
        document.write("<td id='name_row1'>Anu</td>");
        document.write("<td id='address_row1'>Colombo</td>");
        document.write("<td id='age_row1'>20</td>");
        document.write("<td><button id='edit_button1' class='edit' onclick='editrow(\"1\")'>Edit</button> <button id='save_button1' class='save' onclick='saverow(\"1\")'>Save</button><button class='delete' onclick='deleterow(this)'>Delete</button></td>");
        document.write("</tr>");

        // 用于添加新行的输入区域
        document.write("<tr id='new_row_input'>"); // 给添加行输入框所在的行一个ID，方便管理
        document.write("<td id='id_new'><input type='text' id='new_id' placeholder='ID'></td>");
        document.write("<td id='name_new'><input type='text' id='new_name' placeholder='Name'></td>");
        document.write("<td id='address_new'><input type='text' id='new_address' placeholder='Address'></td>");
        document.write("<td id='age_new'><input type='text' id='new_age' placeholder='Age'></td>");
        document.write("<td><button onclick='addrow()'>Add Row</button></td>");
        document.write("</tr>");
        document.write("</table>");

        // 所有的JavaScript函数将在此处定义
        // ... (后续章节的代码将放在这里)
    </script>
</body>
</html>

登录后复制

在上述HTML结构中，我们：

创建了一个ID为 TABLE 的表格。
定义了表头。
添加了一个示例数据行 (row1)，其中包含编辑、保存和删除按钮。注意 onclick 事件中传递的参数 \"1\"，这是因为JavaScript字符串中需要对引号进行转义。
添加了一个特殊行 (new_row_input)，用于输入新数据并触发 addrow 函数。

3. 核心JavaScript功能实现

接下来，我们将逐步实现添加、编辑、保存和删除行的JavaScript函数。

立即学习“Java免费学习笔记（深入）”；

3.1 添加行 (addrow)

addrow 函数负责从输入框中获取数据，然后动态地创建并插入一个新的表格行。

        function addrow(){
            var new_id_val = document.getElementById("new_id").value;
            var new_name_val = document.getElementById("new_name").value;
            var new_address_val = document.getElementById("new_address").value;
            var new_age_val = document.getElementById("new_age").value;

            var mytable = document.getElementById("TABLE");
            // 获取当前表格的行数，用于生成新行的唯一ID
            var t_length = mytable.rows.length - 1; // 减去用于添加新行的输入行
            var newRowId = "row" + t_length;

            // 创建新行的HTML字符串
            var newRowHTML = "<tr id='" + newRowId + "'>" +
                                 "<td id='id_" + newRowId + "'>" + new_id_val + "</td>" +
                                 "<td id='name_" + newRowId + "'>" + new_name_val + "</td>" +
                                 "<td id='address_" + newRowId + "'>" + new_address_val + "</td>" +
                                 "<td id='age_" + newRowId + "'>" + new_age_val + "</td>" +
                                 "<td>" +
                                     "<button id='edit_button" + t_length + "' class='edit' onclick='editrow(\"" + t_length + "\")'>Edit</button> " +
                                     "<button id='save_button" + t_length + "' class='save' onclick='saverow(\"" + t_length + "\")'>Save</button> " +
                                     "<button class='delete' onclick='deleterow(this)'>Delete</button>" +
                                 "</td>" +
                             "</tr>";

            // 在“添加新行”的输入行之前插入新行
            var newRow = mytable.insertRow(t_length);
            newRow.outerHTML = newRowHTML;

            // 清空输入框
            document.getElementById("new_id").value = "";
            document.getElementById("new_name").value = "";
            document.getElementById("new_address").value = "";
            document.getElementById("new_age").value = "";
        }

登录后复制

说明：

我们通过 document.getElementById().value 获取用户在输入框中填写的数据。
mytable.rows.length - 1 用于确定新行插入的位置（在输入行之前）和生成新行的唯一ID。
outerHTML 属性被用来设置新行的完整HTML内容，包括其单元格和操作按钮。每个新行的ID和其内部元素的ID都包含了 t_length 以确保唯一性。
添加完成后，清空输入框，方便用户继续添加。

3.2 删除行 (deleterow)

deleterow 函数通过事件触发的元素向上查找其父级 <tr> 元素并将其从DOM中移除。

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

        function deleterow(buttonElement) {
            // 获取按钮所在的 td 元素
            var td = buttonElement.parentNode; 
            // 获取 td 所在的 tr 元素
            var tr = td.parentNode;
            // 从 tr 的父元素（tbody 或 table）中移除 tr
            tr.parentNode.removeChild(tr);
        }

登录后复制

说明：

我们将 this 作为参数传递给 deleterow 函数，this 指代被点击的按钮元素。
通过 parentNode 属性，我们可以逐级向上找到按钮所在的 <td> 元素，再找到 <td> 所在的 <tr> 元素。
最后，使用 tr.parentNode.removeChild(tr) 将该行从表格中移除。

3.3 编辑行 (editrow)

editrow 函数是整个CRUD功能的核心和难点。它的主要任务是将表格单元格的文本内容替换为可编辑的 <input type='text'> 元素，并切换按钮的可见状态。

        function editrow(x){
            // 切换按钮显示状态：隐藏编辑按钮，显示保存按钮
            document.getElementById("edit_button" + x).style.display = "none";
            document.getElementById("save_button" + x).style.display = "block";

            // 获取当前行各个单元格的DOM元素
            var idCell = document.getElementById("id_row" + x);
            var nameCell = document.getElementById("name_row" + x);
            var addressCell = document.getElementById("address_row" + x);
            var ageCell = document.getElementById("age_row" + x);

            // 获取单元格的当前文本内容
            var id_data = idCell.innerHTML;
            var name_data = nameCell.innerHTML;
            var address_data = addressCell.innerHTML;
            var age_data = ageCell.innerHTML;

            // 构建新的输入框HTML字符串，并预填充当前内容
            var id_input = "<input type='text' id='id_text" + x + "' value='" + id_data + "'>";
            var name_input = "<input type='text' id='name_text" + x + "' value='" + name_data + "'>";
            var address_input = "<input type='text' id='address_text" + x + "' value='" + address_data + "'>";
            var age_input = "<input type='text' id='age_text" + x + "' value='" + age_data + "'>"; 

            // 关键步骤：将单元格的 innerHTML 替换为输入框
            idCell.innerHTML = id_input;
            nameCell.innerHTML = name_input;
            addressCell.innerHTML = address_input;
            ageCell.innerHTML = age_input;
        }

登录后复制

说明：

函数接收一个参数 x，它代表当前行的唯一标识符（例如 1, 2, 3...）。
首先，它通过修改 display 样式来隐藏“编辑”按钮并显示“保存”按钮。
接着，它获取当前行中所有数据单元格（ID、Name、Address、Age）的DOM元素。
获取每个单元格当前的 innerHTML（即显示的数据）。
核心修改： 使用获取到的数据，动态构建 <input type='text'> 元素的HTML字符串。这些输入框的ID也包含 x，例如 id_text1，以便在保存时能够准确获取其值。value 属性被设置为单元格的原始数据，实现预填充。
最关键的步骤是： 将每个单元格的 innerHTML 属性设置为新构建的输入框HTML字符串。这样，原有的文本内容就会被输入框替代，用户可以开始编辑。

3.4 保存行 (saverow)

saverow 函数在用户点击“保存”按钮后触发。它会从编辑模式下的输入框中获取新值，然后将单元格内容恢复为纯文本，并再次切换按钮状态。

        function saverow(y){
            // 获取输入框中的新值
            var id_val = document.getElementById("id_text" + y).value;
            var name_val = document.getElementById("name_text" + y).value;
            var address_val = document.getElementById("address_text" + y).value;
            var age_val = document.getElementById("age_text" + y).value;

            // 将单元格的 innerHTML 替换为新的文本值
            document.getElementById("id_row" + y).innerHTML = id_val;
            document.getElementById("name_row" + y).innerHTML = name_val;
            document.getElementById("address_row" + y).innerHTML = address_val;
            document.getElementById("age_row" + y).innerHTML = age_val;

            // 切换按钮显示状态：显示编辑按钮，隐藏保存按钮
            document.getElementById("edit_button" + y).style.display = "block";
            document.getElementById("save_button" + y).style.display = "none";
        }

登录后复制

说明：

函数接收一个参数 y，代表当前行的唯一标识符。
通过 document.getElementById().value 获取对应输入框中的新值。
将每个数据单元格的 innerHTML 属性设置为这些新值，从而将输入框替换为更新后的文本。
最后，再次切换按钮的显示状态，使“编辑”按钮可见，“保存”按钮隐藏。

4. 完整代码示例

将上述所有JavaScript函数整合到 <body> 标签内的 <script> 块中，即可得到一个完整的动态表格CRUD功能。

<!DOCTYPE html>
<html>
<head>
    <title>动态表格CRUD</title>
    <style>
        table {
            border-collapse: collapse;
            width: 500px;
            margin: 20px;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        .save {
            display: none; /* 初始时隐藏保存按钮 */
        }
        input[type="text"] {
            width: 90%; /* 使输入框适应单元格宽度 */
        }
    </style>
</head>
<body>
    <script>
        document.write("<table id='TABLE' border='1' width='500'>");
        document.write("<tr>");
        document.write("<td>ID</td>");
        document.write("<td>Name</td>");
        document.write("<td>Address</td>");
        document.write("<td>Age</td>");
        document.write("<td>Action</td>");
        document.write("</tr>");

        document.write("<tr id='row1'>");
        document.write("<td id='id_row1'>1</td>");
        document.write("<td id='name_row1'>Anu</td>");
        document.write("<td id='address_row1'>Colombo</td>");
        document.write("<td id='age_row1'>20</td>");
        document.write("<td><button id='edit_button1' class='edit' onclick='editrow(\"1\")'>Edit</button> <button id='save_button1' class='save' onclick='saverow(\"1\")'>Save</button><button class='delete' onclick='deleterow(this)'>Delete</button></td>");
        document.write("</tr>");

        document.write("<tr id='new_row_input'>");
        document.write("<td id='id_new'><input type='text' id='new_id' placeholder='ID'></td>");
        document.write("<td id='name_new'><input type='text' id='new_name' placeholder='Name'></td>");
        document.write("<td id='address_new'><input type='text' id='new_address' placeholder='Address'></td>");
        document.write("<td id='age_new'><input type='text' id='new_age' placeholder='Age'></td>");
        document.write("<td><button onclick='addrow()'>Add Row</button></td>");
        document.write("</tr>");
        document.write("</table>");

        function editrow(x){
            document.getElementById("edit_button" + x).style.display = "none";
            document.getElementById("save_button" + x).style.display = "block";

            var idCell = document.getElementById("id_row" + x);
            var nameCell = document.getElementById("name_row" + x);
            var addressCell = document.getElementById("address_row" + x);
            var ageCell = document.getElementById("age_row" + x);

            var id_data = idCell.innerHTML;
            var name_data = nameCell.innerHTML;
            var address_data = addressCell.innerHTML;
            var age_data = ageCell.innerHTML;

            var id_input = "<input type='text' id='id_text" + x + "' value='" + id_data + "'>";
            var name_input = "<input type='text' id='name_text" + x + "' value='" + name_data + "'>";
            var address_input = "<input type='text' id='address_text" + x + "' value='" + address_data + "'>";
            var age_input = "<input type='text' id='age_text" + x + "' value='" + age_data + "'>"; 

            idCell.innerHTML = id_input;
            nameCell.innerHTML = name_input;
            addressCell.innerHTML = address_input;
            ageCell.innerHTML = age_input;
        } 

        function saverow(y){
            var id_val = document.getElementById("id_text" + y).value;
            var name_val = document.getElementById("name_text" + y).value;
            var address_val = document.getElementById("address_text" + y).value;
            var age_val = document.getElementById("age_text" + y).value;

            document.getElementById("id_row" + y).innerHTML = id_val;
            document.getElementById("name_row" + y).innerHTML = name_val;
            document.getElementById("address_row" + y).innerHTML = address_val;
            document.getElementById("age_row" + y).innerHTML = age_val;

            document.getElementById("edit_button" + y).style.display = "block";
            document.getElementById("save_button" + y).style.display = "none";
        }

        function deleterow(buttonElement) {
            var td = buttonElement.parentNode; 
            var tr = td.parentNode;
            tr.parentNode.removeChild(tr);
        }

        function addrow(){
            var new_id_val = document.getElementById("new_id").value;
            var new_name_val = document.getElementById("new_name").value;
            var new_address_val = document.getElementById("new_address").value;
            var new_age_val = document.getElementById("new_age").value;

            var mytable = document.getElementById("TABLE");
            var t_length = mytable.rows.length - 1; // 减去用于添加新行的输入行
            var newRowId = "row" + t_length;

            var newRowHTML = "<tr id='" + newRowId + "'>" +
                                 "<td id='id_" + newRowId + "'>" + new_id_val + "</td>" +
                                 "<td id='name_" + newRowId + "'>" + new_name_val + "</td>" +
                                 "<td id='address_" + newRowId + "'>" + new_address_val + "</td>" +
                                 "<td id='age_" + newRowId + "'>" + new_age_val + "</td>" +
                                 "<td>" +
                                     "<button id='edit_button" + t_length + "' class='edit' onclick='editrow(\"" + t_length + "\")'>Edit</button> " +
                                     "<button id='save_button" + t_length + "' class='save' onclick='saverow(\"" + t_length + "\")'>Save</button> " +
                                     "<button class='delete' onclick='deleterow(this

登录后复制

以上就是使用纯JavaScript实现动态表格行的增删改查（CRUD）功能的详细内容，更多请关注php中文网其它相关文章！