Dynamic addition of table rows using javascript

The code in the table 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"> Row 2 </td>

</Tr>

<Tr bgcolor = # 0000FF>

<Td width = 6%> <input type = checkbox id ="Box3"> </Td>

<Td> Row 3 </td>

</Tr>

</Table>

Dynamically add table rowsJavascriptThe function is as follows:

Function addRow (){

//Add a row

Var newTr =TestTbl. InsertRow ();

//Add two columns

Var newTd0 = newTr. insertCell ();

Var newTd1= NewTr. insertCell ();

//Set column content and attributes

NewTd0.innerHTML ='<Input type = checkbox id ="Box4">';

NewTd2.innerText ='Add new row';

}

This is simple. Here is a detailed description:

1,InserRow ()AndInsertCell ()Function

InsertRow ()A function can contain parameters in the following format:

InsertRow (index)

This function adds a new rowIndexFor exampleInsertRow (0 ),Is to add a new row before the first line. DefaultInsertRow ()Function equivalentInsertRow (-1 ),Add a new row to the end of the table.

InsertCell ()AndInsertRowThe usage is the same.

2Dynamically set attributes and events

InnerHTML and innerText in the preceding rows are column attributes.

ThisInnerThat is,"Inner"<Tb> </tb>Between,InnerTextYes to add<Tb> </tb>Text,InnerHTMLYes to add<Tb> </tb>BetweenHTMLCode(ThisSoSimple. This explanation is redundant.)

You can set other attributes in the same way. For example, you can set the row background color.

NewTr. bgColor = 'red ';

 

The same is true for setting events.

For example, I want to execute a function defined by myself when I click Add row.NewClick, newClickThe number of rows is as follows:

Function newClick (){

Alert ("This is the newly added line.");

}

PairOnclickThe code for setting this function is as follows:

NewTr. onclick =NewClick;

Here, the argument is: = the following part must be the function name.,And cannot contain quotation marks,

NewTr. onclick =NewClick ();

NewTr. onclick ='Newclick';

NewTr. onclick ="NewClick";

The above statements are all incorrect.

Why, actually, knowing why doesn't it mean anything, and knowing how to use itOKIf you do not want to know, you can skip the following section.

 

Actually, this=TheNewClickIs directed to your own definedNewClickFunction pointer,JavascriptThe function name is the pointer to the function, and the browser that adds brackets cannot find the function.

The following statement is correct.

NewTr. onclick =Function newClick (){

Alert ("This is the newly added line.");

}

This function name is actually the same

 

The usage of other events is the same.