表格部分代碼如下：
<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>
<td width=6%><input type=checkbox id="box3"></td>
<td>第三行</td>
</tr>
</table>
動(dòng)態(tài)添加表行的javascript函數(shù)如下：
<script language="javascript">
function addRow(){
//添加一行
var newTr = testTbl.insertRow();
//設(shè)置行背景
newTr.bgColor = '#008040';
//添加兩列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
//設(shè)置列內(nèi)容和屬性
newTd0.innerHTML = '<input type=checkbox id="box4">';
newTd1.innerText= '新增加的行';
}
</script>
<BR>
<a href="#" onclick="addRow();">增加一行</a>
就這么簡(jiǎn)單，做點(diǎn)詳細(xì)的說明：
1、inserRow()和insertCell()函數(shù)
insertRow()函數(shù)可以帶參數(shù)，形式如下：
insertRow(index)
這個(gè)函數(shù)將新行添加到index的那一行前，比如insertRow(0),是將新行添加到第一行之前。默認(rèn)的insertRow()函數(shù)相當(dāng)于insertRow(-1),將新行添加到表的最后。
insertCell()和insertRow的用法相同。
2、動(dòng)態(tài)設(shè)置屬性和事件
上面行數(shù)中的innerHTML和innerText都是列的屬性。
這個(gè)inner，就是“inner”到<tb></tb>之間，innerText是添加到<tb></tb>之間的文本，innerHTML是添加到<tb></tb>之間的HTML代碼(這個(gè)so簡(jiǎn)單，這個(gè)解釋挺多余的)
設(shè)置其他屬性也是用同樣的方式，比如，設(shè)置行背景色
newTr.bgColor = 'red';
?
設(shè)置事件也一樣，需要簡(jiǎn)單說明一點(diǎn)。
比如，我要讓點(diǎn)擊新加行的時(shí)候執(zhí)行一個(gè)自己定義的函數(shù) newClick,newClick行數(shù)如下：
function newClick(){
alert("這是新添加的行");
｝
對(duì)onclick事件設(shè)置這個(gè)函數(shù)的代碼如下：
newTr.onclick = newClick;
這里需要主義的是，＝后面的部分必須是函數(shù)名,而且不能帶引號(hào)，
newTr.onclick = newClick();
newTr.onclick = 'newClick';
newTr.onclick = "newClick";
上面的寫法都是錯(cuò)誤的。
為什么，其實(shí)知道為什么沒有什么意思，知道怎么用就OK了，如果不想知道，可以跳過下面這一段。
?
實(shí)際上這個(gè)=后面的newClick是指向自己定義的newClick函數(shù)的指針，javascript里面函數(shù)名就是指向函數(shù)的指針，加了引號(hào)括號(hào)什么的瀏覽器就找不到那個(gè)函數(shù)了。
下面的寫法，也是正確的
newTr.onclick = function newClick(){
alert("這是新添加的行");
｝
這個(gè)使用函數(shù)名實(shí)際上是一樣的
設(shè)置其他的事件用法相同。
posted on 2007-01-18 14:39
一縷青煙 閱讀(1824)
評(píng)論(0) 編輯 收藏