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

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

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

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

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

在上述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 = "" +
                                 "" + new_id_val + "" +
                                 "" + new_name_val + "" +
                                 "" + new_address_val + "" +
                                 "" + new_age_val + "" +
                                 "" +
                                     "Edit " +
                                     "Save " +
                                     "Delete" +
                                 "" +
                             "";

            // 在“添加新行”的输入行之前插入新行
            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 函数通过事件触发的元素向上查找其父级

LongShot

LongShot 是一款 AI 写作助手，可帮助您生成针对搜索引擎优化的内容博客。

下载

        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 属性，我们可以逐级向上找到按钮所在的 元素，再找到 所在的 元素。
• 最后，使用 tr.parentNode.removeChild(tr) 将该行从表格中移除。

3.3 编辑行 (editrow)

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

        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 = "";
            var name_input = "";
            var address_input = "";
            var age_input = ""; 

            // 关键步骤：将单元格的 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（即显示的数据）。
• 核心修改： 使用获取到的数据，动态构建 元素的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函数整合到

标签内的