javascript 動態新增表格行

表格部分程式碼如下：

<table id="testTbl" border=1>

<tr id="tr1">

<td width=6%><input type=checkbox id="box1"></td>

<td id="b">第一行</td>

</tr>

<tr id="tr2">

<td width=6%><input type=checkbox id="box2"></td>

<td id="b">第二行</td>

</tr>

<tr bgcolor=#0000FF>

<td width=6%><input type=checkbox id="box3"></td>

<td>第三行</td>

</tr>

</table>

動態新增錶行的javascript函式如下：

function addRow(){

//新增一行

var newTr = testTbl.insertRow();

//新增兩列

var newTd0 = newTr.insertCell();

var newTd1 = newTr.insertCell();

//設定列內容和屬性

newTd0.innerHTML = '<input type=checkbox id="box4">';

newTd2.innerText= '新加行';

}

就這麼簡單，做點詳細的說明：

1、inserRow()和insertCell()函式

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

insertRow(index)

這個函式將新行新增到index的那一行前，比如insertRow(0),是將新行新增到第一行之前。預設的insertRow()函式相當於insertRow(-1),將新行新增到表的最後。

insertCell()和insertRow的用法相同。

2、動態設定屬性和事件

上面行數中的innerHTML和innerText都是列的屬性。

這個inner，就是“inner”到<tb></tb>之間，innerText是新增到<tb></tb>之間的文字，innerHTML是新增到<tb></tb>之間的HTML程式碼(這個so簡單，這個解釋挺多餘的)

設定其他屬性也是用同樣的方式，比如，設定行背景色

newTr.bgColor = 'red';

 

設定事件也一樣，需要簡單說明一點。

比如，我要讓點選新加行的時候執行一個自己定義的函式 newClick,newClick行數如下：

function newClick(){

alert("這是新新增的行");

｝

對onclick事件設定這個函式的程式碼如下：

newTr.onclick = newClick;

這裡需要主義的是，＝後面的部分必須是函式名,而且不能帶引號，

newTr.onclick = newClick();

newTr.onclick = 'newClick';

newTr.onclick = "newClick";

上面的寫法都是錯誤的。

為什麼，其實知道為什麼沒有什麼意思，知道怎麼用就OK了，如果不想知道，可以跳過下面這一段。

 

實際上這個=後面的newClick是指向自己定義的newClick函式的指標，javascript裡面函式名就是指向函式的指標，加了引號括號什麼的瀏覽器就找不到那個函式了。

下面的寫法，也是正確的

newTr.onclick = function newClick(){

alert("這是新新增的行");

｝

這個使用函式名實際上是一樣的

 

設定其他的事件用法相同。

-------------------------------------------------------------------------------------------------------