JavaScript dynamically add Table rows

Javascript| News

Describes how to use JavaScript to dynamically add table rows and explain the methods in detail

Add Table Rows Dynamically

Wen/ray

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) to add 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" to <tb></tb>, InnerText is added to <tb></tb> between the text, innerHTML is added to the <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 latter 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 back of the Newclick is a pointer to their own definition of the Newclick function, JavaScript inside the function name is a pointer to the function, with quotes in parentheses what the browser can 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

Set other event usages the same.