javascript如何建立表格(javascript繪製表格的二種方法)_基礎知識

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("行的By" );
var index=row.rowIndex;//有這個屬性，嘿嘿
objTable.deleteRow(index);

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

複製程式碼 程式碼如下:

function clearRow(){
getElementById("myTable");

   for( var i=1; i   {
   tblObj.deleteRow(i) }

這段程式碼要刪除原來的表格的表體，有兩個問題。首先不能是deleteRow(i)，應該是deleteRow(1)。因為在刪除表格行的時候，表格的行數在變化，這就是問題的關鍵，rows.length總是在變小，刪除的行數總是會比預想的要少一半，所以正確的刪除表格的行的程式碼應該是這樣：

複製程式碼 程式碼如下:

function clearRow(){

getElementById("myTable");
   var length= objTable.rows.length ;
   for( var i=1; i   {       }
}




3、動態設定單元格與行的屬性

A、採用setAttribute()方法，格式如下：setAttribute(屬性，屬性值)

說明：這個方法幾乎所有的DOM物件都可以使用，第一個參數是屬性的名稱，比如說：border，第二個就是你要為border設定的值了，例如：1

複製程式碼

程式碼如下:var objMyTable = document.getElementB.""""); objMyTable.setAttribute("border",1);//為表格設定邊框為1

其他的例如你要為一個TD設定高度，同樣先取得這個TD對象，然後使用setAttribute()方法

複製程式碼

程式碼如下:var objCell = document.getElementBy." objCell.setAttribute("height",24);//為儲存格設定高度為24

在使用的時候遇到一個設定樣式的問題，不能用setAttribute("class","inputbox2");而應該使用setAttribute("className","inputbox2")，呵呵，其他我估計也有同樣的問題，有些屬性和我們在DW裡面的不一致，呵呵，大家自己摸索吧。

B、直接賦值

複製程式碼

程式碼如下:var objMyTable = document.getElementB.""""); objMyTable.border=1;//為表格設定邊框為1

這個方法也全部適用，呵呵。

4、建立表格

了解了行

與儲存格的增刪那就可以建立表格了。

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

複製程式碼 程式碼如下:

var objMyTable = document.getElementB."""");

第二步：建立行與列的物件

複製程式碼 程式碼如下:

var index = objMyTable.rows. 🎜>var nextRow = objMyTable.insertRow(index);//要新增的行，我這裡是從倒數第二行開始新增的
//儲存格箱號

var newCellCartonNo = nextRow.insertCell();
var cartonNoName = "IptCartonNo";
newCellCartonNo.innerHTML = " CartonNo";
newCellCartonNo.innerHTML = " CartonNo";
newCellCartonNo.innerHTML = " ";
newCellCartonNo.setAttribute("className","tablerdd");

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

複製代碼

代碼如下:

-/html/PUBL "IC DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">