Dynamic addition of table rows using javascript

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.