本教程详细介绍了如何使用纯JavaScript在网页中实现对动态生成表格行的添加、编辑和删除（CRUD）功能。我们将重点讲解编辑功能的实现原理，包括如何将表格单元格内容转换为可编辑的输入框，并在保存时更新数据，提供完整的代码示例和注意事项，帮助开发者纯前端实现数据管理。
1. 引言：动态表格操作的必要性
在现代Web应用中，动态地展示和管理数据是常见的需求。用户可能需要实时地添加新数据、修改现有记录或删除不再需要的信息，而这一切都可以在不刷新页面的情况下通过前端JavaScript实现。本教程将引导您使用纯JavaScript构建一个具备完整增删改查（CRUD）功能的动态表格。
2. 初始HTML结构与表格生成
首先，我们需要一个基本的HTML表格结构来承载数据。在这个示例中，我们将使用JavaScript动态地创建表格及其初始行。这种方法虽然在大型应用中可能不是最佳实践（通常会直接在HTML中定义骨架或使用模板引擎），但对于演示纯JavaScript操作DOM非常有效。
动态表格CRUD 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%; /* 使输入框适应单元格宽度 */ } // 使用 document.write 动态生成表格 document.write("
| ID | "); document.write("Name | "); document.write("Address | "); document.write("Age | "); document.write("Action | "); document.write("
| 1 | "); document.write("Anu | "); document.write("Colombo | "); document.write("20 | "); document.write(""); document.write(" |
| "); document.write(" | "); document.write(" | "); document.write(" | "); document.write(" | "); document.write(" |
在上述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 + " " + "" + " " + " " + "" + " " + " "; // 在“添加新行”的输入行之前插入新行 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 函数通过事件触发的元素向上查找其父级
元素并将其从DOM中移除。
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函数整合到
标签内的 块中，即可得到一个完整的动态表格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）功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1578292.html
微信扫一扫 
支付宝扫一扫 
