动态增删行的HTML表格：设置首单元格占位符为行索引

我帮你完善了这个可动态增删行的HTML表格，并且实现了每行首个输入项的占位符自动设置为该行的索引的功能——不管是新增行，还是删除行后，所有行的索引都会自动更新，避免混淆。以下是完整的可运行示例：

<!DOCTYPE html>
<html>
<head>
    <title>动态表格行索引占位符</title>
    <script src="https://code.jquery.com/jquery-1.12.1.js" integrity="sha256-VuhDpmsr9xiKwvTIHfYWCIQ84US9WqZsLfR4P7qF6O8=" crossorigin="anonymous"></script>
    <style>
        table { border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #ccc; padding: 8px; }
        input { padding: 4px; width: 100px; }
        .delete-btn { color: red; cursor: pointer; }
    </style>
</head>
<body>
    <table id="myTable">
        <thead>
            <tr>
                <th>索引输入框</th>
                <th>其他内容</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 初始数据行 -->
            <tr>
                <td><input type="text" placeholder="1"></td>
                <td><input type="text"></td>
                <td class="delete-btn" onclick="SomeDeleteRowFunction(this)">删除</td>
            </tr>
        </tbody>
    </table>
    <button onclick="addNewRow()">添加新行</button>

    <script>
        // 初始化：确保现有行的占位符正确
        $(document).ready(function() {
            updateRowPlaceholders();
        });

        // 添加新行函数
        function addNewRow() {
            var table = document.getElementById("myTable").getElementsByTagName('tbody')[0];
            var newRow = table.insertRow();
            
            // 创建单元格1：带索引占位符的输入框
            var cell1 = newRow.insertCell(0);
            var input1 = document.createElement("input");
            input1.type = "text";
            // 计算当前行索引（数据行从1开始）
            var rowIndex = table.rows.length;
            input1.placeholder = rowIndex;
            cell1.appendChild(input1);
            
            // 创建单元格2：普通输入框
            var cell2 = newRow.insertCell(1);
            var input2 = document.createElement("input");
            input2.type = "text";
            cell2.appendChild(input2);
            
            // 创建单元格3：删除按钮
            var cell3 = newRow.insertCell(2);
            cell3.className = "delete-btn";
            cell3.onclick = function() { SomeDeleteRowFunction(this); };
            cell3.textContent = "删除";
        }

        // 删除行函数
        window.SomeDeleteRowFunction = function SomeDeleteRowFunction(btn) {
            var row = btn.parentNode.parentNode;
            row.parentNode.removeChild(row);
            // 删除后更新所有行的占位符
            updateRowPlaceholders();
        }

        // 统一更新所有数据行的占位符
        function updateRowPlaceholders() {
            var rows = document.getElementById("myTable").getElementsByTagName('tbody')[0].rows;
            for (var i = 0; i < rows.length; i++) {
                var input = rows[i].getElementsByTagName('input')[0];
                if (input) {
                    // 索引从1开始
                    input.placeholder = (i + 1).toString();
                }
            }
        }
    </script>
</body>
</html>

核心实现细节： #

• 初始化处理：页面加载完成后自动调用updateRowPlaceholders()，确保初始行的占位符正确。
• 新增行时设置占位符：新增行时，通过table.rows.length获取当前数据行的总数，以此作为新行的索引（从1开始），直接设置输入框的placeholder属性。
• 删除行后更新所有索引：删除任意行后，立即遍历所有剩余数据行，重新计算并更新每行首个输入框的占位符，保证索引连续不混乱。
• 样式优化：添加了基础的表格样式，让界面更清晰，删除按钮也做了简单的样式区分。

内容的提问来源于stack exchange，提问作者Val.M