JavaScript 動態表格 name 索引衝突解決：基於行號生成唯一索引

問題

動態追加 <tr>，name='singles[i].id' 索引 i 與現有行衝突，導致後台綁定錯誤/數據丟失。

核心思路：當前行數作為索引基數

function addTr(value) {
    var table = document.getElementById("table1");
    var startIndex = table.rows.length - 1; // 排除表頭行，若無表頭則 rows.length
    // 若表頭在 thead 中，用 table.tBodies[0].rows.length

    for (var i = 0, len = value.length; i < len; i++) {
        var idx = startIndex + i;
        var temp = value[i].split("#");
        var row = table.insertRow(-1); // -1 追加到末尾
        var cell1 = row.insertCell(0);
        cell1.innerHTML = "<input type='text' readonly name='singles[" + idx + "].id' value='" + temp[0] + "'>";
        var cell2 = row.insertCell(1);
        cell2.innerHTML = "<input type='text' readonly name='singles[" + idx + "].name' value='" + temp[2] + "'>";
    }
}

刪除行時的索引修正

若允許刪除行，單純用行號會導致後續行索引不連續，後台接收數組出現 null 元素。兩種處理：

1. 後台容忍稀疏數組：遍歷時跳過 null。
2. 前端刪除後重新編排所有行的 name 索引：
   

   function reindex() {
       var rows = document.getElementById("table1").rows;
       for (var i = 1; i < rows.length; i++) { // 跳過表頭
           var inputs = rows[i].getElementsByTagName("input");
           for (var j = 0; j < inputs.length; j++) {
               inputs[j].name = inputs[j].name.replace(/\[\d+\]/, "[" + (i-1) + "]");
           }
       }
   }

進階：模板克隆 + data-index

<template id="rowTpl">
  <tr>
    <td><input name="singles[__IDX__].id" /></td>
    <td><input name="singles[__IDX__].name" /></td>
    <td><button onclick="delRow(this)">刪除</button></td>
  </tr>
</template>

function addRow(data) {
    var tpl = document.getElementById("rowTpl").content.cloneNode(true);
    var idx = document.querySelectorAll("#table1 tbody tr").length;
    tpl.querySelectorAll("input").forEach(function(inp) {
        inp.name = inp.name.replace("__IDX__", idx);
        inp.value = data[inp.name.includes(".id") ? "id" : "name"];
    });
    document.querySelector("#table1 tbody").appendChild(tpl);
}

後台接收提示

SpringMVC / ASP.NET MVC 自動綁定 List singles，稀疏索引會產生 null 元素，建議前端刪除時重新編排或後端流式過濾 singles.stream().filter(Objects::nonNull)。