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

使用纯 JavaScript 实现动态表格的增删改功能教程

本教程详细介绍了如何使用纯 JavaScript 在网页中实现动态表格的添加、编辑和删除（CRUD）功能。我们将通过一个实际示例，逐步讲解如何构建交互式表格，特别是修正了编辑功能中常见的将单元格内容转换为可编辑输入框的关键步骤，并提供了完整的代码实现及最佳实践建议。

引言

在现代 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>），然后从表格中移除该行。

飞书多维表格

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

查看详情

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

登录后复制

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