首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 網頁程式設計 >> PHP 程式設計 >> PHP 相關知識

JavaScript 動態向表格插入行與單元格:構造函數封裝與 insertRow/insertCell 實戰

     編輯:PHP 相關知識

方案一:構造函數封裝 (innerHTML 模式)

function InsterCell(tableId, content, place) {
    this.mTableId = tableId;
    this.mInsContent = content;
    this.mInsPlace = place;
    this.cInsCell = InsCell;
    this.cClearCell = ClearCell;
}
function InsCell() {
    var cell = this.mTableId.cells[this.mInsPlace];
    cell.innerHTML = '' 
                    + this.mInsContent 
                    + '
'; this.mInsPlace++; } function ClearCell() { for (var i=0; i

方案二:標準 DOM API (推薦)

function tbladdrow() {
    var i = lines.rows.length;
    var row = Table1.insertRow(Table1.rows.length);
    var col = row.insertCell(0);
    col.innerHTML = '';
    col = row.insertCell(1);
    col.innerHTML = '';
    // ... 更多列
}

對比

維度innerHTML 封裝insertRow/insertCell
瀏覽器兼容性良好 (舊 IE)標準 DOM,現代瀏覽器全支持
性能大量操作時較慢原生方法,效率高
結構清晰度字符串拼接易出錯節點操作結構化
name 索引化手動拼接易於動態生成 line[i][field]

現代項目優先選擇方案二,配合 template 標籤或 cloneNode 更優雅。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved