动态插入、添加删除表格行的JS代码

 
 
  1. <html>
  2. <head>
  3. <title>Table对象的方法</title>
  4. <scriptlanguage="JavaScript">
  5. varintRowIndex=0;
  6. functioninsertRow(tbIndex){
  7. varobjRow=myTable.insertRow(tbIndex);
  8. varobjCel=objRow.insertCell(0);
  9. objCel.innerText=document.myForm.myCell1.value;
  10. varobjCel=objRow.insertCell(1);
  11. objCel.innerText=document.myForm.myCell2.value;
  12. objRow.attachEvent("onclick",getIndex);
  13. objRow.style.background="pink";
  14. }
  15. functiondeleteRow(tbIndex){
  16. myTable.deleteRow(tbIndex);
  17. }
  18. functiongetIndex(){
  19. intRowIndex=event.srcElement.parentElement.rowIndex;
  20. pos.innerText=intRowIndex;
  21. }
  22. </script>
  23. </head>
  24. <bodyonload="pos.innerText=intRowIndex;">
  25. <h2>Table对象的方法</h2>
  26. <hr>
  27. 当前位置:<spanid="pos"></span>
  28. <tableid="myTable"border=1>
  29. <tronclick="getIndex()">
  30. <td>HTML</td>
  31. <td>CSS</td>
  32. </tr>
  33. <tronclick="getIndex()">
  34. <td>JavaScript</td>
  35. <td>VBScript</td>
  36. </tr>
  37. </table>
  38. <formname="myForm">
  39. 第一栏:<inputtype="text"name="myCell1"value="CGI"><br>
  40. 第二栏:<inputtype="text"name="myCell2"value="ASP"><br>
  41. <inputtype="button"onclick="insertRow(intRowIndex)"value="插入行">
  42. <inputtype="button"onclick="deleteRow(intRowIndex)"value="删除行">
  43. <inputtype="button"onclick="insertRow(myTable.rows.length);"value="添加行">
  44. </form>
  45. </body>
  46. </html>

你可能感兴趣的:(js)