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");
這樣就搞定了,可以簡單的建立一個行和列了。具體的代碼我貼在下面。只是很簡單的例子,不過方法就大概是上面的了,呵呵,慢慢摸索吧~
5、appendChild()方法
我就直接貼代碼了,大家去研究,時間緊,哈哈,見諒~
Text Box #1:
Text Box #1:
posted on 2008-04-16 17:08 ka80 卡門網 閱讀(...) 評論(...) 編輯 收藏
重新整理評論重新整理頁面返回頂部
部落格園首頁博問新聞快閃記憶體程式員招聘知識庫
Powered by: 部落格園模板提供:滬江部落格
Copyright 2013 ka80 卡門網