欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

js动态添加和删除行实例代码

程序员文章站 2022-04-15 22:27:35
...
  1. <html>

  2. <head>

  3. <title>js-sample</title>

  4. <script type="text/javascript">

  5. <!--

  6. var count = 1;

  7. function add() {

  8. var tbl = document.all.ci;

  9. var rows = tbl.rows.length;

  10. var tr = tbl.insertRow(rows);

  11. var name = tr.insertCell(0);

  12. name.innerHTML = '<input type="text">';

  13. var tel = tr.insertCell(1);

  14. tel.innerHTML = '<input type="text">';

  15. var rdo = tr.insertCell(2);

  16. rdo.innerHTML = '<input type="radio" value="0" name="rdo' + count + '">Yes <input type="radio" value="1" name="rdo' + count + '">No';

  17. var chk = tr.insertCell(3);

  18. chk.innerHTML = '<input type="checkbox" value="0" name="chk' + count + '">Modify <input type="checkbox" value="1" name="chk' + count + '">Delete';

  19. var del = tr.insertCell(4);

  20. del.innerHTML = '<input type="button" onclick="del(this)" value="Delete">';

  21. count++;

  22. }

  23. function del(btn) {

  24. var tr = btn.parentElement.parentElement;

  25. var tbl = tr.parentElement;

  26. tbl.deleteRow(tr.rowIndex-1);

  27. }

  28. //-->

  29. </script>

  30. </head>

  31. <body>

  32. <input type="button" onclick="add()" value="Add-Customer">

  33. <table border="1" style="width:100%" id="ci" name="ci">

  34. <caption>customer information</caption>

  35. <thead>

  36. <tr>

  37. <th>Name</th>

  38. <th>Tel</th>

  39. <th>Radio</th>

  40. <th>CheckBox</th>

  41. <th> </th>

  42. </tr>

  43. </thead>

  44. <tbody>

  45. <tr>

  46. <td><input type="text" value="Zhang San"></td>

  47. <td><input type="text" value="111"></td>

  48. <td>

  49. <input type="radio" value="0" name="rdo">Yes <input type="radio" value="1" name="rdo">No

  50. </td>

  51. <td>

  52. <input type="checkbox" value="0" name="chk">Modify <input type="checkbox" value="1" name="chk">Delete

  53. </td>

  54. <td>

  55. <input type="button" onclick="del(this)" value="Delete">

  56. </td>

  57. </tr>

  58. </tbody>

  59. </table>

  60. </body></html>

以上就是js动态添加和删除行实例代码的详细内容,更多请关注其它相关文章!