Add or delete table rows using JavaScript

You have completed the right-click menu function in the previous text of the custom right-click menu function in HTML. The "add row" and "Delete row" menu items do not yet provide the click function. So how does JavaScript implement this function? Here, the parameters and HTML objects used do not match the custom right-click menu function in the previous HTML document. Instead, they just start a new test.

 

Train of Thought:

1. Define button1 on the home page as the trigger for "adding a row" and use the onclick event of button1

2. Define button2 on the home page as the trigger for "deleting a row" and use the onclick event of button2

3. Define a div1 with "id = modifyrow" to place the "row"

4. In div1, define a "id = createrow" hidden div2 container. The key is to set the attribute value display to none.

5. Define a "id = modifytable" Table object in div2, and add or delete rows to or from the table. Define a row here.

6. Compile a Javascript script function. function: show the table object when div2 is clicked; add a row to the table object when button1 is clicked; delete a row from the table object when button2 is clicked

 

Key points:

Based on the above ideas, there are two key points: one is to add a row to the table object when you click button1, and the other is to delete a row from the table object when you click button2.

 

Parameters required for analysis:

E: Registration event

Isshow: bool type value

_ ID: div tag ID

 

Definition of HTML objects on the home page:

<Input id = "button1" type = "button" value = "add a row" onclick = "createrow ();"/>
<Input id = "button2" type = "button" value = "delete a row" onclick = "deleterow ();"/>
<Div id = "modifyrow" align = "center" style = "height: auto; width: auto; display: Table;" onclick = "setposition (event, true, 'createrow') ">
<Span> creatrow </span>
<Div id = "createrow" style = "display: none">
<Table align = "center" width = "1000px;" Height = "20px" border = "2" id = "modifytable">
<Tr align = "Left">
<TD align = "Left">
<Br>
<Br>
</TD>
</Tr>
</Table>
</Div>
</Div>

You need to write the script function:

1. Implementation: show the table object when you click div2.

Function setposition (E, isshow, _ id ){
VaR odiv = Document. getelementbyid (_ id );
If (isshow ){
VaR isie = navigator. appname. indexof ("Microsoft ")! =-1? True: false;
Odiv. style. Top = isie? Event. clienty + "PX": E. Pagey + "PX ";
VaR ileft = isie? Event. clientX-100: E. pagex;
Odiv. style. Left = ileft + "PX ";
If (isshow) odiv. style. Display = "";
}
Else
Odiv. style. Display = "NONE ";
}

2. Implementation: When you click button1, a row is added to the table object.

Function createrow (){
VaR TR = modifytable. insertrow (modifytable. Rows. Length );
VaR TD;
For (VAR I = 0; I <modifytable. Rows [0]. cells. length; I ++ ){
TD = tr. insertcell ();
TD. innerhtml = "<br> ";
}
}

3. Implementation: When you click button2, the table object deletes a row.

Function deleterow (){
VaR odiv = Document. getelementbyid ("createrow ");
If (odiv. style. display! = "NONE "){
If (modifytable. Rows. length> 1 ){
Modifytable. deleterow (1 );
}
Else {
Odiv. style. Display = "NONE ";
}
}
}

 

Effect:

1. After the page is loaded, click "create row" to load a row.

2. Click button1 to add a row.

3. Click button2 to delete the row.

Note: If you want to add or delete rows after there are no rows on the page. First, click Create row to load a row, and then add or delete the row.