引言
在现代 web 应用开发中，动态表格操作是常见的需求，例如管理用户列表、商品库存等。本教程将指导您如何仅使用 javascript 来实现对表格行的添加、编辑和删除功能，无需依赖任何后端语言（如 php）。我们将从一个基本的 html 结构开始，逐步完善各项功能，并特别关注编辑功能的实现细节，解决在将静态文本转换为可编辑输入框时可能遇到的问题。
1. 初始 HTML 结构概述
为了演示动态表格操作，我们首先需要一个基本的 HTML 表格结构。本例中，我们将使用 JavaScript 动态生成表格，但实际项目中，表格通常会预先定义在 HTML 中，或通过 AJAX 从服务器加载数据。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态表格增删改</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
button {
margin-right: 5px;
padding: 5px 10px;
cursor: pointer;
}
.save {
display: none; /* 初始时隐藏保存按钮 */
}
input[type="text"] {
width: 90%;
padding: 4px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>动态表格数据管理</h1>
<div id="table-container"></div>
<script>
// JavaScript 代码将在这里插入
</script>
</body>
</html>在 <script> 标签内部，我们将动态生成表格。这里为了简化示例，我们直接使用 document.write。在实际生产环境中，推荐使用 document.createElement 和 appendChild 等 DOM 操作方法，以避免覆盖页面内容。
// 初始表格及数据（使用 document.write 简化演示）
document.addEventListener('DOMContentLoaded', function() {
let tableHTML = `
<table id='TABLE' border='1' width='500'>
<tr>
<td>ID</td>
<td>姓名</td>
<td>地址</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr id='row1'>
<td id='id_row1'>1</td>
<td id='name_row1'>Anu</td>
<td id='address_row1'>Colombo</td>
<td id='age_row1'>20</td>
<td>
<button id='edit_button1' class='edit' onclick="editrow('1')">编辑</button>
<button id='save_button1' class='save' onclick="saverow('1')">保存</button>
<button class='delete' onclick="deleterow(this)">删除</button>
</td>
</tr>
<tr id='add_new_row'>
<td><input type='text' id='new_id' placeholder="ID"></td>
<td><input type='text' id='new_name' placeholder="姓名"></td>
<td><input type='text' id='new_address' placeholder="地址"></td>
<td><input type='text' id='new_age' placeholder="年龄"></td>
<td><button onclick='addrow()'>添加行</button></td>
</tr>
</table>`;
document.getElementById('table-container').innerHTML = tableHTML;
});注意： 上述代码将表格内容插入到 table-container div 中，而不是直接使用 document.write 覆盖整个文档，这是一种更推荐的做法。
2. 核心 JavaScript 功能实现
我们将实现 addrow (添加), deleterow (删除), editrow (编辑) 和 saverow (保存) 四个核心功能。
立即学习“Java免费学习笔记（深入）”；
2.1 添加行 (addrow)
addrow 函数负责获取输入框中的新数据，创建一个新的表格行，并将其插入到表格中。
function addrow(){
var new_id = document.getElementById("new_id").value;
var new_name = document.getElementById("new_name").value;
var new_address = document.getElementById("new_address").value;
var new_age = document.getElementById("new_age").value;
if (!new_id || !new_name || !new_address || !new_age) {
alert("所有字段都不能为空！");
return;
}
var mytable = document.getElementById("TABLE");
// 获取当前表格的行数，用于生成新的行ID
// 注意：这里的 t_length 应该考虑表头和添加行本身
var t_length = mytable.rows.length - 1; // 减去“添加新行”的行，确保ID递增
// 创建新的行HTML字符串
var newRowHTML = `
<tr id='row${t_length}'>
<td id='id_row${t_length}'>${new_id}</td>
<td id='name_row${t_length}'>${new_name}</td>
<td id='address_row${t_length}'>${new_address}</td>
<td id='age_row${t_length}'>${new_age}</td>
<td>
<button id='edit_button${t_length}' class='edit' onclick='editrow("${t_length}")'>编辑</button>
<button id='save_button${t_length}' class='save' onclick='saverow("${t_length}")'>保存</button>
<button class='delete' onclick='deleterow(this)'>删除</button>
</td>
</tr>`;
// 将新行插入到“添加新行”之前
var addRowElement = document.getElementById('add_new_row');
addRowElement.insertAdjacentHTML('beforebegin', newRowHTML);
// 清空输入框
document.getElementById("new_id").value = "";
document.getElementById("new_name").value = "";
document.getElementById("new_address").value = "";
document.getElementById("new_age").value = "";
}2.2 删除行 (deleterow)
deleterow 函数通过事件对象获取被点击按钮的父元素（<td>），再获取其父元素（<tr>），然后从表格中移除该行。
function deleterow(buttonElement) {
var td = buttonElement.parentNode;
var tr = td.parentNode;
tr.parentNode.removeChild(tr);
}注意： 原始代码中的 deleterow() 没有传递参数，依赖全局 event 对象。为了更好的可维护性和兼容性，我们修改为传递按钮元素本身，然后通过 parentNode 属性向上查找。
2.3 编辑行 (editrow)
editrow 函数是本教程的重点，它负责将表格单元格的静态文本内容转换为可编辑的 <input type="text"> 字段。
问题分析： 原始代码中，虽然创建了包含 <input> 标签的 HTML 字符串，但并没有将其赋值给对应的单元格的 innerHTML，导致页面上没有实际的视觉变化。
解决方案： 在创建完 input 元素的 HTML 字符串后，必须将其赋值给对应的 <td> 元素的 innerHTML 属性。
function editrow(x){
// 1. 切换编辑和保存按钮的显示状态
document.getElementById("edit_button"+x).style.display="none";
document.getElementById("save_button"+x).style.display="inline-block"; // 使用 inline-block 以保持按钮在同一行
// 2. 获取当前行的所有单元格元素
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);
// 3. 获取当前单元格的文本内容
var id_data = idCell.innerHTML;
var name_data = nameCell.innerHTML;
var address_data = addressCell.innerHTML;
var age_data = ageCell.innerHTML;
// 4. 将文本内容转换为包含输入框的HTML字符串
// 注意：这里为每个输入框设置了唯一的ID，方便后续saverow函数获取值
var id_input_html = "<input type='text' id='id_text"+x+"' value='"+id_data+"'>";
var name_input_html = "<input type='text' id='name_text"+x+"' value='"+name_data+"'>";
var address_input_html = "<input type='text' id='address_text"+x+"' value='"+address_data+"'>";
var age_input_html = "<input type='text' id='age_text"+x+"' value='"+age_data+"'>";
// 5. 将生成的输入框HTML字符串赋值给对应的单元格的 innerHTML
// 这是修复原始代码中缺少的核心步骤！
idCell.innerHTML = id_input_html;
nameCell.innerHTML = name_input_html;
addressCell.innerHTML = address_input_html;
ageCell.innerHTML = age_input_html;
} 2.4 保存行 (saverow)
saverow 函数负责在用户完成编辑后，从输入框中获取新值，更新表格单元格的文本内容，并将输入框变回静态文本。
function saverow(y){
// 1. 从输入框中获取新值
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;
// 2. 更新对应单元格的 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;
// 3. 切换编辑和保存按钮的显示状态
document.getElementById("edit_button"+y).style.display = "inline-block";
document.getElementById("save_button"+y).style.display = "none";
}3. 完整示例代码
将上述所有 JavaScript 函数整合到 HTML 文件的 <script> 标签中，即可得到一个完整的、可运行的动态表格增删改示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态表格增删改</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
table {
width: 80%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
button {
margin-right: 5px;
padding: 5px 10px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #e0e0e0;
}
button:hover {
background-color: #d0d0d0;
}
.save {
display: none; /* 初始时隐藏保存按钮 */
background-color: #4CAF50;
color: white;
border-color: #4CAF50;
}
.save:hover {
background-color: #45a049;
}
.delete {
background-color: #f44336;
color: white;
border-color: #f44336;
}
.delete:hover {
background-color: #da190b;
}
input[type="text"] {
width: calc(100% - 10px); /* 减去padding和border */
padding: 4px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 3px;
}
#add_new_row td input {
width: calc(100% - 10px);
}
</style>
</head>
<body>
<h1>动态表格数据管理</h1>
<div id="table-container"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let tableHTML = `
<table id='TABLE' border='1' width='500'>
<tr>
<th>ID</th>
<th>姓名</th>
<th>地址</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr id='row1'>
<td id='id_row1'>1</td>
<td id='name_row1'>Anu</td>
<td id='address_row1'>Colombo</td>
<td id='age_row1'>20</td>
<td>
<button id='edit_button1' class='edit' onclick="editrow('1')">编辑</button>
<button id='save_button1' class='save' onclick="saverow('1')">保存</button>
<button class='delete' onclick="deleterow(this)">删除</button>
</td>
</tr>
<tr id='add_new_row'>
<td><input type='text' id='new_id' placeholder="ID"></td>
<td><input type='text' id='new_name' placeholder="姓名"></td>
<td><input type='text' id='new_address' placeholder="地址"></td>
<td><input type='text' id='new_age' placeholder="年龄"></td>
<td><button onclick='addrow()'>添加行</button></td>
</tr>
</table>`;
document.getElementById('table-container').innerHTML = tableHTML;
});
function editrow(x){
document.getElementById("edit_button"+x).style.display="none";
document.getElementById("save_button"+x).style.display="inline-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_html = "<input type='text' id='id_text"+x+"' value='"+id_data+"'>";
var name_input_html = "<input type='text' id='name_text"+x+"' value='"+name_data+"'>";
var address_input_html = "<input type='text' id='address_text"+x+"' value='"+address_data+"'>";
var age_input_html = "<input type='text' id='age_text"+x+"' value='"+age_data+"'>";
idCell.innerHTML = id_input_html;
nameCell.innerHTML = name_input_html;
addressCell.innerHTML = address_input_html;
ageCell.innerHTML = age_input_html;
}
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 = "inline-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 = document.getElementById("new_id").value;
var new_name = document.getElementById("new_name").value;
var new_address = document.getElementById("new_address").value;
var new_age = document.getElementById("new_age").value;
if (!new_id || !new_name || !new_address || !new_age) {
alert("所有字段都不能为空！");
return;
}
var mytable = document.getElementById("TABLE");
var t_length = mytable.rows.length - 1; // 减去“添加新行”的行
var newRowHTML = `
<tr id='row${t_length}'>
<td id='id_row${t_length}'>${new_id}</td>
<td id='name_row${t_length}'>${new_name}</td>
<td id='address_row${t_length}'>${new_address}</td>
<td id='age_row 
