如何实现Next to Action列输入值时插入行并复制指定单元格内容？

需求说明 #

• 当在表格的Next to Action列输入内容时，自动在当前行下方插入新行
• 新行需复制当前行的Name和Date列内容
• 示例：在John行的Next to Action列填入Bobby后，会在John与Peter行之间插入新行，新行Name为John、Date为25/04/2023

示例表格 #

实现代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <table id="actionTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Date</th>
                <th>Action By</th>
                <th>Next to Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>25/04/2023</td>
                <td>Tim</td>
                <td contenteditable="true"></td>
            </tr>
            <tr>
                <td>Peter</td>
                <td>17/05/2023</td>
                <td>Richard</td>
                <td contenteditable="true"></td>
            </tr>
        </tbody>
    </table>

    <script>
        const table = document.getElementById('actionTable');
        const tbody = table.querySelector('tbody');

        tbody.addEventListener('input', function(e) {
            const target = e.target;
            if (target.tagName === 'TD' && target.cellIndex === 3 && target.textContent.trim() !== '') {
                const currentRow = target.parentElement;
                const newRow = document.createElement('tr');
                
                // 复制Name列内容
                const nameCell = document.createElement('td');
                nameCell.textContent = currentRow.cells[0].textContent;
                // 复制Date列内容
                const dateCell = document.createElement('td');
                dateCell.textContent = currentRow.cells[1].textContent;
                
                // 创建空单元格
                const actionByCell = document.createElement('td');
                const nextActionCell = document.createElement('td');
                nextActionCell.contentEditable = true;
                
                newRow.appendChild(nameCell);
                newRow.appendChild(dateCell);
                newRow.appendChild(actionByCell);
                newRow.appendChild(nextActionCell);
                
                currentRow.insertAdjacentElement('afterend', newRow);
            }
        });
    </script>
</body>
</html>

代码说明 #

• 给Next to Action列单元格设置contenteditable="true"，使其支持编辑
• 通过事件委托监听表格输入事件，无需给每个单元格单独绑定事件
• 检测到Next to Action单元格有内容时，自动创建新行并复制当前行的Name、Date内容
• 新行的Action By和Next to Action单元格留空，且Next to Action保持可编辑状态

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