AngularJS表格：实现单条/选中行编辑功能遇阻求助

问题还原 #

我把JSON数据加载到表格里，原本想实现两个编辑功能：

• 每行的「编辑」按钮，点击后只编辑当前这一行的数据
• 页面上的「编辑选中项」按钮，点击后只编辑那些被勾选的行
  但现在不管点哪个按钮，都会一次性编辑所有行，完全达不到预期效果，求帮忙解决！

示例JSON数据（example.json） #

{
  "example": [
    { "first": "something1", "second": "one" },
    { "first": "something2", "second": "two" },
    { "first": "something3", "second": "three" },
    { "first": "something4", "second": "four" }
  ]
}

修复后的HTML代码（index.htm） #

<!DOCTYPE html>
<html>
<head>
    <title>Table Edit Demo</title>
    <style>
        table { border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .edit-btn, #edit-selected { padding: 4px 8px; cursor: pointer; }
    </style>
</head>
<body>
    <button id="edit-selected">编辑选中项</button>
    <table id="data-table">
        <thead>
            <tr>
                <th>选择</th>
                <th>First</th>
                <th>Second</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>
        // 加载JSON数据
        fetch('example.json')
            .then(response => response.json())
            .then(data => {
                const tableBody = document.querySelector('#data-table tbody');
                data.example.forEach((item, index) => {
                    const row = document.createElement('tr');
                    row.dataset.index = index; // 给行标记数据索引，方便后续定位
                    row.innerHTML = `
                        <td><input type="checkbox" class="row-checkbox"></td>
                        <td class="first-cell">${item.first}</td>
                        <td class="second-cell">${item.second}</td>
                        <td><button class="edit-btn">编辑</button></td>
                    `;
                    tableBody.appendChild(row);
                });

                // 绑定单行编辑按钮事件
                document.querySelectorAll('.edit-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const targetRow = this.closest('tr');
                        toggleRowEdit(targetRow);
                    });
                });

                // 绑定编辑选中项按钮事件
                document.getElementById('edit-selected').addEventListener('click', function() {
                    const checkedBoxes = document.querySelectorAll('.row-checkbox:checked');
                    if (checkedBoxes.length === 0) {
                        alert('请先勾选要编辑的行！');
                        return;
                    }
                    checkedBoxes.forEach(checkbox => {
                        const targetRow = checkbox.closest('tr');
                        toggleRowEdit(targetRow);
                    });
                });

                // 通用的单行编辑切换函数
                function toggleRowEdit(row) {
                    const firstCell = row.querySelector('.first-cell');
                    const secondCell = row.querySelector('.second-cell');
                    const editBtn = row.querySelector('.edit-btn');

                    // 判断当前是编辑状态还是查看状态
                    if (firstCell.querySelector('input') === null) {
                        // 切换到编辑模式：把文本换成输入框
                        const firstVal = firstCell.textContent.trim();
                        const secondVal = secondCell.textContent.trim();
                        firstCell.innerHTML = `<input type="text" value="${firstVal}">`;
                        secondCell.innerHTML = `<input type="text" value="${secondVal}">`;
                        editBtn.textContent = '保存';
                    } else {
                        // 切换到查看模式：保存输入框的值，更新原始数据
                        const newFirst = firstCell.querySelector('input').value.trim();
                        const newSecond = secondCell.querySelector('input').value.trim();
                        firstCell.textContent = newFirst;
                        secondCell.textContent = newSecond;
                        editBtn.textContent = '编辑';

                        // 更新原始JSON数据（可选，根据需求是否需要持久化）
                        const dataIndex = row.dataset.index;
                        data.example[dataIndex] = { first: newFirst, second: newSecond };
                        console.log('已更新数据项:', data.example[dataIndex]);
                    }
                }
            })
            .catch(error => console.error('加载数据失败:', error));
    </script>
</body>
</html>

关键修复点说明 #

1. 给表格行绑定数据索引：通过row.dataset.index把JSON数组里的索引绑定到对应表格行，后续编辑时能精准定位到要修改的数据项
2. 精准定位编辑目标：
   • 单行编辑：点击按钮时，用this.closest('tr')获取按钮所在的行，只对这一行执行编辑逻辑
   • 选中项编辑：先筛选出所有被勾选的复选框，再逐个获取对应的行，分别处理，不会影响未勾选的行
3. 复用编辑逻辑：把单行的编辑/保存状态切换抽成toggleRowEdit函数，不管是单行还是选中行，都用同一个逻辑，避免重复代码
4. 状态切换提示：按钮文本会在「编辑」和「保存」之间切换，用户能清晰看到当前状态
5. 边界处理：点击「编辑选中项」时如果没有勾选任何行，会弹出提示，避免无意义操作

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