实现HTML表格行追加后的行内编辑功能求助

架构老林

2026-5-21

嘿，我帮你整理了一个完整的可运行示例，涵盖了你需要的表格行追加、Bootstrap Wizard导航，还有核心的行内编辑功能。直接复制下面的代码就能在浏览器里跑起来，关键逻辑都加了注释，方便你理解和修改：

完整可运行示例

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格行追加与行内编辑示例</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <!-- Bootstrap Wizard CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-wizard@1.0.0/dist/bootstrap-wizard.min.css">
    <!-- 自定义样式 -->
    <style>
        .container {
            max-width: 900px;
        }
        .table td {
            vertical-align: middle;
        }
        .editable-cell {
            position: relative;
            cursor: pointer;
        }
        .editable-cell span {
            display: inline-block;
            padding: 4px 8px;
            min-width: 80px;
        }
        .editable-cell input {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 4px 8px;
            border: 1px solid #66afe9;
            border-radius: 4px;
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
        }
        .editable-cell.edit-mode input {
            display: block;
        }
        .editable-cell.edit-mode span {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <div id="rootwizard">
            <!-- Wizard导航栏 -->
            <ul class="nav nav-pills">
                <li class="active"><a href="#tab1" data-toggle="tab">选择采购订单</a></li>
                <li><a href="#tab2" data-toggle="tab">订单详情（可编辑）</a></li>
            </ul>
            <!-- Wizard内容区 -->
            <div class="tab-content mt-3">
                <!-- 第一个Tab：源表格 -->
                <div class="tab-pane active" id="tab1">
                    <h4>采购订单列表</h4>
                    <table id="tblPurchaseOrders" class="table table-bordered">
                        <thead>
                            <tr class="info">
                                <th>产品名称</th>
                                <th>单价</th>
                                <th>数量</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>笔记本电脑</td>
                                <td>5999</td>
                                <td><input type="number" class="form-control quantity-input" value="2" min="0"></td>
                            </tr>
                            <tr>
                                <td>无线鼠标</td>
                                <td>99</td>
                                <td><input type="number" class="form-control quantity-input" value="0" min="0"></td>
                            </tr>
                            <tr>
                                <td>机械键盘</td>
                                <td>299</td>
                                <td><input type="number" class="form-control quantity-input" value="3" min="0"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- 第二个Tab：目标表格（可编辑） -->
                <div class="tab-pane" id="tab2">
                    <h4>已选择的订单详情</h4>
                    <table id="tbOrderDetail" class="table table-bordered">
                        <thead>
                            <tr class="info">
                                <th>产品名称</th>
                                <th>单价</th>
                                <th>数量</th>
                                <th>小计</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 动态追加的行会插入这里 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入依赖JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-wizard@1.0.0/dist/bootstrap-wizard.min.js"></script>
    <!-- 自定义逻辑 -->
    <script>
        $(document).ready(function() {
            // 初始化Bootstrap Wizard
            $('#rootwizard').bootstrapWizard({
                onTabShow: function(tab, navigation, index) {
                    // 切换到第二个Tab（索引从0开始）时执行追加逻辑
                    if (index === 1) {
                        // 清空目标表格已有内容（可选，根据需求调整）
                        $('#tbOrderDetail tbody').empty();
                        
                        // 遍历源表格的有效行
                        $('#tblPurchaseOrders tbody tr').each(function() {
                            const quantity = parseInt($(this).find('.quantity-input').val());
                            // 只追加数量>0的行
                            if (quantity > 0) {
                                // 克隆当前行并转换为可编辑结构
                                const $newRow = $(this).clone();
                                
                                // 把源行的普通文本和输入框转换为可编辑的span+input组合
                                $newRow.find('td:eq(0)').html(function() {
                                    const text = $(this).text();
                                    return `<div class="editable-cell">
                                                <span>${text}</span>
                                                <input type="text" class="edit-input" value="${text}">
                                            </div>`;
                                });
                                
                                $newRow.find('td:eq(1)').html(function() {
                                    const price = $(this).text();
                                    return `<div class="editable-cell">
                                                <span>${price}</span>
                                                <input type="number" class="edit-input" value="${price}" min="0">
                                            </div>`;
                                });
                                
                                $newRow.find('.quantity-input').replaceWith(function() {
                                    return `<div class="editable-cell">
                                                <span>${quantity}</span>
                                                <input type="number" class="edit-input" value="${quantity}" min="0">
                                            </div>`;
                                });
                                
                                // 添加小计列并计算初始值
                                const price = parseInt($newRow.find('td:eq(1) span').text());
                                const subtotal = price * quantity;
                                $newRow.append(`<td><span>${subtotal}</span></td>`);
                                
                                // 将处理后的行追加到目标表格
                                $newRow.appendTo('#tbOrderDetail tbody');
                            }
                        });
                        
                        // 给目标表格绑定行内编辑事件
                        bindInlineEditEvents();
                    }
                }
            });
            
            // 绑定行内编辑的交互事件
            function bindInlineEditEvents() {
                // 点击单元格进入编辑模式
                $('#tbOrderDetail .editable-cell').off('click').on('click', function() {
                    $(this).addClass('edit-mode').find('.edit-input').focus();
                });
                
                // 失去焦点时保存编辑内容
                $('#tbOrderDetail .edit-input').off('blur').on('blur', function() {
                    const $cell = $(this).closest('.editable-cell');
                    let newValue = $(this).val().trim();
                    
                    // 数字类型验证
                    if ($(this).attr('type') === 'number') {
                        newValue = parseInt(newValue);
                        if (isNaN(newValue) || newValue < 0) {
                            alert('请输入有效的非负数字');
                            newValue = $cell.find('span').text();
                            $(this).val(newValue);
                        }
                    }
                    
                    // 更新显示文本并退出编辑模式
                    $cell.find('span').text(newValue);
                    $cell.removeClass('edit-mode');
                    
                    // 实时更新小计
                    updateRowSubtotal($cell.closest('tr'));
                });
                
                // 按回车键快速保存
                $('#tbOrderDetail .edit-input').off('keydown').on('keydown', function(e) {
                    if (e.keyCode === 13) {
                        $(this).blur();
                    }
                });
            }
            
            // 更新单行的小计金额
            function updateRowSubtotal($row) {
                const price = parseInt($row.find('td:eq(1) span').text());
                const quantity = parseInt($row.find('td:eq(2) span').text());
                const subtotal = price * quantity;
                $row.find('td:eq(3) span').text(subtotal);
            }
        });
    </script>
</body>
</html>

关键功能说明

Bootstrap Wizard导航：使用官方插件实现Tab切换，在切换到第二个Tab时自动筛选并追加符合条件的行。
行内编辑实现：
- 每个可编辑单元格包含span（显示文本）和input（编辑用），点击时切换显示状态。
- 支持文本和数字类型的编辑，包含简单的合法性验证。
- 编辑完成后自动更新小计金额，保证数据一致性。
动态行处理：克隆源行后重新构建结构，确保追加到目标表格的行具备编辑能力，同时用事件委托避免重复绑定问题。

内容的提问来源于stack exchange，提问作者Azeem Hafeez

实现HTML表格行追加后的行内编辑功能求助

完整可运行示例 #

HTML结构

关键功能说明 #

完整可运行示例

关键功能说明