JavaScript 動態新增表格列：修正 Rows 索引語法錯誤

錯誤程式碼分析

var newCell = Rows(newRow.rowIndex).insertCell(Cells.length);
// TypeError: Rows is not a function

Rows 是 HTMLCollection (類陣列)，需用方括號 [] 索引，而非圓括號 ()。

修正後完整函式

function insertRows() {
    var tbl = document.getElementById("dictTbl");
    var newRow = tbl.insertRow(tbl.rows.length); // 插在最後
    // newRow.cells 初始為空，需先 insertCell
    for (var i = 0; i < 4; i++) {
        var newCell = newRow.insertCell(i); // 直接在 newRow 插入第 i 個儲存格
        newCell.align = "center";
        switch (i) {
            case 0:
                newCell.innerHTML = '<input type="checkbox"/>';
                break;
            case 1:
                newCell.innerHTML = '<span></span>'; // 分類級別稍後填入
                break;
            case 2:
                newCell.innerHTML = '<input id="classifyName" name="classifyName" type="text" size="50" maxlength="25"/>';
                break;
            case 3:
                newCell.innerHTML = '<span></span>'; // 繼承父分類
                break;
        }
    }
}

關鍵點總結

• tbl.insertRow(index) 回傳 HTMLTableRowElement，直接對其呼叫 insertCell(cellIndex)。
• 無需透過 Rows 集合二次索引，newRow 已是目標列。
• innerHTML 勿包含多餘 <td> 標籤，insertCell 已建立 <td>。
• 動態生成的 id 應唯一，建議加時間戳或索引避免重複。

搭配 Struts2 標籤的完整頁面片段

<s:form id="Form1" method="post">
<table id="table1" class="stdtable">
  <thead><tr><th>選擇</th><th>分類級別</th><th>分類名稱</th><th>繼承父分類</th></tr></thead>
  <tbody id="dictTbl">
    <s:iterator value="%{#request.classifyList}" var="cls">
      <tr>
        <td><input type="checkbox"/></td>
        <td><s:property value="%{#cls.rank}"/></td>
        <td><input name="classifyName" value="<s:property value='%{#cls.classifyName}'/>" /></td>
        <td><s:property value="%{#cls.inherit}"/></td>
      </tr>
    </s:iterator>
  </tbody>
</table>
<button onclick="insertRows()">新增行</button>
</s:form>