最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 20:20:07
文档

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

js动态添加和删除行实例代码:<html> <head> <title>js-sample</title> <script type="text/javascript"> <!-- var count = 1; function add() { var tbl = document.all.ci; var rows = tbl.rows.length; var tr = tbl.insertRow(rows);
推荐度:
导读js动态添加和删除行实例代码:<html> <head> <title>js-sample</title> <script type="text/javascript"> <!-- var count = 1; function add() { var tbl = document.all.ci; var rows = tbl.rows.length; var tr = tbl.insertRow(rows);


  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动态添加和删除行实例代码

js动态添加和删除行实例代码:<html> <head> <title>js-sample</title> <script type="text/javascript"> <!-- var count = 1; function add() { var tbl = document.all.ci; var rows = tbl.rows.length; var tr = tbl.insertRow(rows);
推荐度:
标签: 动态 js 例子
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top