<Html>
<Head>
<Title> title </title>
<Script type = "text/javascript">
Function delIndex (obj ){
Var rowIndex = obj. parentNode. parentNode. rowIndex; // obtain the row subscript.
Alert (rowIndex );
Var tb = document. getElementById ("tb ");
Tb. deleteRow (rowIndex); // Delete the current row
Add (rowIndex); // insert a row in the current row
}
Function add (rowIndex ){
Var tb = document. getElementById ("tb ");
If (rowIndex = "-1 "){
RowIndex = tb. rows. length; // by default, a row is inserted at the end.
}
Var row = tb. insertRow (rowIndex); // insert a row in the specified table
Var c1 = row. insertCell (0 );
C1.innerHTML = "new" + rowIndex;
Var c2 = row. insertCell (1 );
C2.innerHTML = '<a href = "javascript: void (0)" onclick = "delIndex (this)"> Delete </a> ';
}
</Script>
</Head>
<Body>
<Input type = "button" value = "add a row" onclick = "add ('-1 ') "> <input type =" button "value =" delete selected item "onclick =" del () "/>
<Table id = "tb">
<Tr> <td> 1 </td> <a href = "javascript: void (0)" onclick = "delIndex (this) "> Delete </a> </td> </tr>
<Tr> <td> 2 </td> <a href = "javascript: void (0)" onclick = "delIndex (this) "> Delete </a> </td> </tr>
<Tr> <td> 3 </td> <a href = "javascript: void (0)" onclick = "delIndex (this) "> Delete </a> </td> </tr>
<Tr> <td> 4 </td> <a href = "javascript: void (0)" onclick = "delIndex (this) "> Delete </a> </td> </tr>
<Tr> <td> 5 </td> <a href = "javascript: void (0)" onclick = "delIndex (this) "> Delete </a> </td> </tr>
<Tr> <td> 6 </td> <a href = "javascript: void (0)" onclick = "delIndex (this) "> Delete </a> </td> </tr>
<Tr> <td> 7 </td> <a href = "javascript: void (0)" onclick = "delIndex (this) "> Delete </a> </td> </tr>
</Table>
</Body>
</Html>
From South-South Space