JavaScript dynamically adds table rows _javascript

The table section code is as follows:

<table id= "testtbl" border=1>

<TR id= "TR1" >

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

<TD id= "B" > First line </td>

</tr>

<tr id= "tr2" >

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

<TD id= "B" > the second line </td>

</tr>

<tr bgcolor= #0000FF >

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

<td> Third line </td>

</tr>

</table>

The JavaScript functions that dynamically add table rows are as follows:

function AddRow () {

Add a row

var newtr = testtbl. InsertRow ();

Add two columns

var newTd0 = Newtr.insertcell ();

var newtd1 = Newtr.insertcell ();

set column contents and properties

newtd0.innerhtml = '<input type=checkbox id= 'box4 '>';

newtd2.innertext= ' new addition line ';

}

As simple as that, do a little more detailed instructions:

1,inserrow () and InsertCell () functions

The InsertRow () function can take parameters in the form as follows:

InsertRow (Index)

This function adds a new row to the row of index, such as insertrow (0), before adding a new row to the first row. The default insertrow () function is equivalent to insertrow ( -1), which adds a new row to the end of the table.

InsertCell () and InsertRow are used in the same usage.

2. Dynamically set properties and events

The innerHTML and innertext in the number of rows above are the properties of the column.

This inner, is "inner" between <tb></tb> ,innertext is added to <TB></TB The text between >,InnerHTML is added to <tb></tb> between the HTML code ( this so simple, this explanation is quite superfluous )

Setting other properties is the same way, for example, to set the row background color

Newtr.bgcolor = ' red ';

Setting up events is the same, and you need to be brief.

For example, I'm going to have to click on a new line to execute a function of my own definition Newclick,newclick the following number of lines:

function Newclick () {

Alert (" This is the newly added row ");

｝

The code for setting this function on the onclick event is as follows:

Newtr.onclick = Newclick;

What is needed here is that the following part must be a function name and cannot be quoted.

Newtr.onclick = Newclick ();

Newtr.onclick = ' Newclick ';

Newtr.onclick = "Newclick";

The wording above is wrong.

Why, in fact, know why there is no meaning, know how to use on the OK , if you do not want to know, you can skip the following paragraph.

In fact, this = the newclick behind is a pointer to a defined Newclick function, in which the function name is a pointer to a function. Browsers with quotes and parentheses do not find that function.

The following wording is also correct

Newtr.onclick = function Newclick () {

Alert (" This is the newly added row ");

｝

This use of the function name is actually the same

The

Sets the same usage for other events.