js动态添加和删除行

  1. <html>  
  2.   
  3. <head>  
  4. <title>js-sample</title>  
  5.   
  6. <script type="text/javascript">  
  7. <!--  
  8. var count = 1;  
  9. function add() {  
  10.   var tbl = document.all.ci;  
  11.   var rows = tbl.rows.length;  
  12.   var tr = tbl.insertRow(rows);  
  13.      
  14.   var name = tr.insertCell(0);  
  15.   name.innerHTML = '<input type="text">';  
  16.   var tel = tr.insertCell(1);  
  17.   tel.innerHTML = '<input type="text">';  
  18.   var rdo = tr.insertCell(2);  
  19.   rdo.innerHTML = '<input type="radio" value="0" name="rdo' + count + '">Yes <input type="radio" value="1" name="rdo' + count + '">No';  
  20.   var chk = tr.insertCell(3);  
  21.   chk.innerHTML = '<input type="checkbox" value="0" name="chk' + count + '">Modify <input type="checkbox" value="1" name="chk' + count + '">Delete';  
  22.   var del = tr.insertCell(4);  
  23.   del.innerHTML = '<input type="button" onclick="del(this)" value="Delete">';  
  24.   count++;  
  25. }  
  26.   
  27. function del(btn) {  
  28.   var tr = btn.parentElement.parentElement;  
  29.   var tbl = tr.parentElement;  
  30.   tbl.deleteRow(tr.rowIndex-1);  
  31. }  
  32. //-->  
  33. </script>  
  34. </head>  
  35.   
  36. <body>  
  37.   
  38. <input type="button" onclick="add()" value="Add-Customer">  
  39.   
  40. <table border="1" style="width:100%" id="ci" name="ci">  
  41.   <caption>customer information</caption>  
  42.   <thead>  
  43.   <tr>  
  44.   <th>Name</th>  
  45.   <th>Tel</th>  
  46.   <th>Radio</th>  
  47.   <th>CheckBox</th>  
  48.   <th> </th>  
  49.   </tr>  
  50.   </thead>  
  51.   <tbody>  
  52.   <tr>  
  53.   <td><input type="text" value="Zhang San"></td>  
  54.   <td><input type="text" value="111"></td>  
  55.   <td>  
  56.   <input type="radio" value="0" name="rdo">Yes <input type="radio" value="1" name="rdo">No  
  57.   </td>  
  58.   <td>  
  59.   <input type="checkbox" value="0" name="chk">Modify <input type="checkbox" value="1" name="chk">Delete  
  60.   </td>  
  61.   <td>  
  62.   <input type="button" onclick="del(this)" value="Delete">  
  63.   </td>  
  64.   </tr>  
  65.   </tbody>  
  66. </table>  
  67.   
  68. </body></html>  
posted @ 2017-06-08 14:00  此时的人生  阅读(461)  评论(0)  编辑  收藏  举报