JavaScript动态创建表格的三种方法及注意事项

// 假设已有 id="myTable" 的表格
var objTable = document.getElementById("myTable");
// 在表格末尾新增一行
var newRow = objTable.insertRow(objTable.rows.length);
// 在该行第一个位置新增单元格
var newCell = newRow.insertCell();
newCell.innerHTML = "新单元格内容";

function clearBodyRows() {
    var objTable = document.getElementById("myTable");
    // 记录当前行数，避免在循环中受长度变化影响
    var length = objTable.rows.length;
    
    // 假设第0行为表头，从第1行开始删除主体
    for (var i = 1; i < length; i++) {
        // 始终删除第1行（原第2行变为第1行，以此类推）
        objTable.deleteRow(1); 
    }
}

var cell = newRow.insertCell();
// 方法A：使用 setAttribute
cell.setAttribute("height", "24");
cell.setAttribute("className", "custom-table-cell");

// 方法B：直接属性赋值
cell.height = 24;
cell.className = "custom-table-cell";

function addRowViaDOM(tableId) {
    var table = document.getElementById(tableId);
    
    // 1. 创建行
    var tr = document.createElement("tr");
    
    // 2. 创建单元格
    var td1 = document.createElement("td");
    var td2 = document.createElement("td");
    
    // 3. 填充内容（支持混合HTML）
    td1.innerText = "数据项 A";
    td2.innerHTML = "";
    
    // 4. 将单元格加入行
    tr.appendChild(td1);
    tr.appendChild(td2);
    
    // 5. 将行加入表格
    table.appendChild(tr);
}