JS動態建立表格(新增、刪除行和單元格)，動態設定屬性，動態新增事件
2009年07月24日 星期五 11:02
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<objTable.rows.length ; i++ )
{
tblObj.deleteRow(i);
}
}　　這段程式碼要刪除原來的表格的表體，有兩個問題。首先不能是deleteRow(i)，應該是deleteRow(1)。因為在刪除表格行的時候，表格的行數在變化，這就是問題的關鍵，rows.length總是在變小，刪除的行數總是會比預想的要少一半，所以正確的刪除表格的行的程式碼應該這樣：
複製內容到剪貼簿程式碼:
function clearRow(){
objTable= document.getElementById("myTable");
var length= objTable.rows.length ;
for( var i=1; i<length; i++ )
{
objTable.deleteRow(i);
}
}

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

　　A、採用setAttribute()方法

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

　　var objMyTable = document.getElementById("myTable");
　　objMyTable.setAttribute("border",1);//為表格設定邊框為1

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

　　var objCell = document.getElementById("myCell");
　　objCell.setAttribute("height",24);//為單元格設定高度為24

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

　　B、直接賦值

　　var objMyTable = document.getElementById("myTable");
　　objMyTable.border=1;//為表格設定邊框為1
　　這個方法也全部適用，呵呵。

      C、複合屬性

      var objMyTable = document.getElementById("myTable");
      objMyTable.style.cursor = "pointer";

4、建立表格

　　瞭解了行<tr>與單元格<td>的增刪那就可以建立表格了。

　　第一步：你需要有一個你去動態變化的表格，我這裡講的是已經存在頁面的表格，我們要設定一個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 = " <input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";
　　newCellCartonNo.setAttribute("className","tablerdd");

5、新增事件

    A、無引數的情況
    function   doalter(){  
        alert('hi');  
      }  
    var tr = Table.insertRow();
    tr.attachEvent("onclick",doalter);
    或
    tr.setAttribute("onclick","doalter()");
    或
    tr.onclick=function(){doalter();};
    或
    tr.onclick=doalter;

    B、傳引數的方法
    var trMouseMove = function(obj)
    {
        return function()
        {
            obj.className='selected';
        }
    }
    var tr = Table.insertRow();
    tr.attachEvent("onmousemove",AddrSelfMouseMove(tr));