JavaScript document.getElementById 與表格操作詳解

程式碼解析

var xiangmustr = row.xiangmu;
var xiang = xiangmustr.split(',');
for (var i = 0; i < xiang.length; i++) {
    tr = document.getElementById("Ge-table-ces")
        .getElementsByTagName("tr");
    td = tr[0].getElementsByTagName("td")[i];
    td.innerHTML = "" + xiang[i] + "";
}

逐行邏輯說明

1. 取得原始字串：row.xiangmu 假設為 "專案A,專案B,專案C"
2. 分割成陣列：split(',') 得到 ["專案A", "專案B", "專案C"]
3. 定位目標表格：document.getElementById("Ge-table-ces") 取得 id="Ge-table-ces" 的 <table> 元素
4. 取得第一列：getElementsByTagName("tr") 回傳所有列，tr[0] 為第一列（通常為表頭或第一行資料）
5. 逐格填入資料：tr[0].getElementsByTagName("td")[i] 取得第 i 個儲存格，設定 innerHTML 為對應陣列值

HTML 結構前置條件

<table id="Ge-table-ces">
  <tr>
    <td></td> <!-- 第 0 格 -->
    <td></td> <!-- 第 1 格 -->
    <td></td> <!-- 第 2 格 -->
    <!-- 需至少有 xiang.length 個 td -->
  </tr>
</table>

潛在風險與改良建議

1. 索引越界風險

若 xiang.length 大於實際 td 數量，會拋出 TypeError: Cannot set property 'innerHTML' of undefined。

// 改良：加入邊界檢查
var tds = tr[0].getElementsByTagName("td");
for (var i = 0; i < xiang.length && i < tds.length; i++) {
    tds[i].textContent = xiang[i]; // 使用 textContent 避免 XSS
}

2. 重複查詢 DOM 效能問題

迴圈中重複呼叫 getElementById 與 getElementsByTagName，建議提取至迴圈外：

var table = document.getElementById("Ge-table-ces");
var firstRow = table.rows[0]; // 更簡潔的取得第一列方式
var cells = firstRow.cells;   // 直接取得 HTMLTableRowElement.cells 集合

for (var i = 0; i < xiang.length && i < cells.length; i++) {
    cells[i].textContent = xiang[i];
}

3. 安全性考量

若資料來源不可信，務必使用 textContent 而非 innerHTML，防止 XSS 攻擊。

進階應用：動態新增列

若需將陣列每個值作為新列插入，而非填入現有第一列：

var tbody = table.tBodies[0] || table; // 相容無 tbody 結構
xiang.forEach(function(value) {
    var row = tbody.insertRow();
    var cell = row.insertCell();
    cell.textContent = value;
});

總結

此程式碼核心功能為：將逗號分隔字串拆解後，順序填入指定表格第一列的各儲存格。實務開發中建議加入防禦性檢查、優化 DOM 存取、使用 textContent 確保安全。