<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">body{Font-size:13px; Line-height:25px; }table{Border-TOP:1PX Solid #333; Border-LEFT:1PX Solid #333; width:400px;} td{Border-RIGHT:1PX Solid #333; Border-BOTTOM:1PX Solid #333; Text-Align:center; }.title{Font-Weight:bold; Background-color: #cccccc;} Input text{width:100px;} </style><script type= "Text/javascript" >function AddRow () {var addtable=document.getelementbyid ("Order"); var row_index=addtable.rows.length-1;//The position of the newly inserted row in the tablevar newrow=addtable.insertrow (Row_index);//Insert new RowNewrow.id= "Row" +row_index;//set the ID of the newly inserted rowvar col1=newrow.insertcell (0); Col1.innerhtml= "Anti-fatigue magic titanium Collar"; var col2=newrow.insertcell (1); Col2.innerhtml=Row_index; var col3=newrow.insertcell (2); Col3.innerhtml= "¥49.00"; var col4=newrow.insertcell (3); Col4.innerhtml= "<input name= ' del" +row_index+ "' type= ' button ' value= ' delete ' onclick=\ ' delrow (' Row ' +row_index+ ') \"/> <input id= ' edit ' +row_index+ ' type= ' button ' value= ' Modify ' onclick=\ ' Editrow (' Row ' +row_index+ ') \ '/> '; } function Delrow (rowId) {var row=document.getelementbyid (rowId). RowIndex;//Delete the position in the table where the row is locateddocument.getElementById ("Order"). DeleteRow (row); } function Editrow (rowId) {var row=document.getelementbyid (rowId). RowIndex;//Modify the position in the table where the row is locatedvar col=document.getElementById (rowId). Cells; var text=col[1].innerhtml; col[1].innerhtml= "<input name= ' num" +row+ "' style= ' width:40px; ' type= ' text ' value= '" +text+ "'/> '; col[3].lastchild.value= "OK"; col[3].lastchild.setattribute ("onclick", "Uprow ('" +rowid+ ")"); /*col[3].innerhtml= "<input name= ' del" +row+ "' type= ' button ' value= ' delete ' onclick=\ ' delrow ('" +rowid+ "') \"/> <input id= ' edit ' +row+ ' type= ' button ' value= ' OK ' onclick=\ ' uprow (' +rowid+ ') \ '/> '*/} function Uprow (rowId) {var row=document.getelementbyid (rowId). RowIndex;//Modify the position in the table where the row is locatedvar col=document.getElementById (rowId). Cells; var text=col[1].firstchild.value; col[1].innerhtml=text; col[3].lastchild.value= "Modify"; col[3].lastchild.setattribute ("onclick", "Editrow ('" +rowid+ ")");/*col[3].innerhtml= "<input name= ' del" +row+ "' type= ' button ' value= ' delete ' onclick=\ ' delrow ('" +rowid+ "') \"/> <input id= ' edit ' +row+ ' type= ' button ' value= ' Modify ' onclick=\ ' Editrow (' +rowid+ ') \ "/>"*/ }</script>class= "title" > <td> Product name </td> <td> quantity </td> <td> price </td> <td> action </td> </tr> <tr id= "Del1" > <td> non-slip leather casual shoes </td> <td>12</td> <td>¥568.5 0</td> <td><input name= "Rowdel" type= "button" value= "delete" onclick= ' Delrow ("Del1") '/> <input id= "Edit1" type= "button" value= "Modify" onclick= ' Editrow ("Del1") '/></td> </tr> <tr> <td colspan= ' 4 ' Style= "height:30px;" > <input name= "addorder" type= "button" value= "Add Order" onclick= "AddRow ()"/></td> </TR></TABLE&G T;</body> JS dynamic operation order Form