引言

在现代 web 应用开发中，动态表格操作是常见的需求，例如管理用户列表、商品库存等。本教程将指导您如何仅使用 javascript 来实现对表格行的添加、编辑和删除功能，无需依赖任何后端语言（如 php）。我们将从一个基本的 html 结构开始，逐步完善各项功能，并特别关注编辑功能的实现细节，解决在将静态文本转换为可编辑输入框时可能遇到的问题。

1. 初始 HTML 结构概述

为了演示动态表格操作，我们首先需要一个基本的 HTML 表格结构。本例中，我们将使用 JavaScript 动态生成表格，但实际项目中，表格通常会预先定义在 HTML 中，或通过 AJAX 从服务器加载数据。

    
    
    
    


    
动态表格数据管理
    


    

在

// 初始表格及数据（使用 document.write 简化演示）
document.addEventListener('DOMContentLoaded', function() {
    let tableHTML = `
        

            

                
ID
                
姓名
                
地址
                
年龄
                
操作
            
            

                
1
                
Anu
                
Colombo
                
20
                

                    编辑 
                    保存
                    删除
                
            
            

                

                

                

                

                
添加行
            
        
`;
    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 = `
        
            ${new_id}
            ${new_name}
            ${new_address}
            ${new_age}
            
                编辑 
                保存 
                删除
            
        `;

    // 将新行插入到“添加新行”之前
    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 函数通过事件对象获取被点击按钮的父元素（

一览AI绘图

一览AI绘图是一览科技推出的AIGC作图工具，用AI灵感助力，轻松创作高品质图片

下载

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

注意： 原始代码中的 deleterow() 没有传递参数，依赖全局 event 对象。为了更好的可维护性和兼容性，我们修改为传递按钮元素本身，然后通过 parentNode 属性向上查找。

2.3 编辑行 (editrow)

editrow 函数是本教程的重点，它负责将表格单元格的静态文本内容转换为可编辑的 字段。

问题分析： 原始代码中，虽然创建了包含 标签的 HTML 字符串，但并没有将其赋值给对应的单元格的 innerHTML，导致页面上没有实际的视觉变化。

解决方案： 在创建完 input 元素的 HTML 字符串后，必须将其赋值给对应的

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 = "";
    var name_input_html = "";
    var address_input_html = "";
    var age_input_html = ""; 

    // 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 文件的

    
    
    
    


    
动态表格数据管理