javascript 動態建立表格：新增、刪除行和儲存格

script 動態建立表格：新增、刪除行和儲存格
2008-03-17 10:07

這段時間寫了不少指令碼，感覺蠻有意思的，雖然能用指令碼把效果實現出來，但是在後台伺服器端擷取資料的時候還是蠻麻煩的，這裡僅提供效果實現的簡單代碼。

利用js來動態建立表格有兩種格式，appendChild()和insertRow、insertCell()。兩種方式其實差不多，但第一種有可能在IE上有問題，所以推薦大家使用第二種了，直接說吧。

1、inserRow()和insertCell()函數

insertRow()函數可以帶參數，形式如下：

insertRow(index)：index從0開始

這個函數將新行添加到index的那一行前，比如insertRow(0),是將新行添加到第一行之前。預設的insertRow()函數相當於 insertRow(-1)，將新行添加到表的最後。一般我們在使用的時候都是：objTable.insertRow (objTable.rows.length).就是為表格objTable在最後新增一行。

insertCell()和insertRow的用法相同，這裡就不再說了。

2、deleteRow()和deleteCell()方法

deleteRow()函數可以帶參數，形式如下：deleteRow(index)：index從0開始

和上面兩個方法差不多的意思，就是刪除指定位置的行和儲存格。要傳入的參數：Index是行在表格中的位置，可以下面的方法取得然後去刪除：

var row=document.getElementById("行的Id");
var index=row.rowIndex;//有這個屬性，嘿嘿
objTable.deleteRow(index);

在使用過程中我碰到的一個問題跟大家說一下，就是刪除表格的行的時候，如果你刪除了某一行，那麼表格行數是馬上就變化的，所以如果你要刪除表格的所有行，下面的代碼是錯誤的：

function clearRow(){
objTable= document.getElementById("myTable");

for( var i=1; i與儲存格的增刪那就可以建立表格了。

第一步：你需要有一個你去動態變化的表格，我這裡講的是已經存在頁面的表格，我們要設定一個id:myTable

var objMyTable = document.getElementById("myTable");

第二步：建立行與列的對象

var index = objMyTable.rows.length-1;
var nextRow = objMyTable.insertRow(index);//要新增的行，我這裡是從倒數第二行開始新增的

//儲存格箱號
var newCellCartonNo = nextRow.insertCell();
var cartonNoName = "IptCartonNo";
newCellCartonNo.innerHTML = " ";
newCellCartonNo.setAttribute("className","tablerdd");

這樣就搞定了，可以簡單的建立一個行和列了。具體的代碼我貼在下面。只是很簡單的例子，不過方法就大概是上面的了，呵呵，慢慢摸索吧~

第1行

5、appendChild()方法

我就直接貼代碼了，大家去研究，時間緊，哈哈，見諒~

Text Box #1:

Text Box #1:

posted on 2008-04-16 17:08 ka80 卡門網 閱讀(...) 評論(...) 編輯 收藏

重新整理評論重新整理頁面返回頂部

部落格園首頁博問新聞快閃記憶體程式員招聘知識庫

Powered by: 部落格園模板提供：滬江部落格
Copyright 2013 ka80 卡門網