javascript는 동적으로 테이블 행을 추가합니다_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행 개수는 다음과 같습니다.

newClick() 함수{

alert("새로 추가된 줄입니다 ");

｝

onclick 이벤트에 이 기능을 설정하는 코드는 다음과 같습니다.

newTr.onclick = newClick;

여기서 해야 할 일은 = 뒤의 부분이 함수 이름 , 이어야 하고 인용할 수 없다는 것입니다.

newTr.onclick = newClick();

newTr.onclick = 'newClick';

newTr.onclick = "newClick";

위의 글은 잘못되었습니다.

왜, 사실 이유를 아는 것은 의미가 없습니다. 사용법을 알면 OK. 절.

사실 = 뒤의 newClick은 자체 정의된 newClick을 가리킵니다. 함수에 대한 포인터, javascript의 함수 이름은 함수에 대한 포인터이며, 만약 그렇다면 브라우저는 함수를 찾을 수 없습니다. 따옴표나 대괄호로 묶습니다.

다음 쓰는 방법도 맞습니다

newTr.onclick = newClick() 기능{

alert("새로 추가된 줄입니다 ");

｝

실제로는 함수명을 보면 똑같습니다

다른 이벤트도 같은 방법으로 설정하세요.