JavaScript dynamic form

running result:
Source:
  1 <!DOCTYPE html>
  2 <html lang="zh">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>动态表格</title>
  6 </head>
  7 <body>
  8     <button type="button" onclick="refresh()">刷新</button>
  9     <button type="button" onclick="checkAll()">全选</button>
 10     <button type="button" onclick="uncheckAll()">不选</button>
 11     <button type="button" onclick="addCell()">添加</button>
 12     <button type="button" onclick="copyCell()">拷贝</button>
 13     <button type="button" onclick="copyCell();delCell()">移动</button>
 14     <button type="button" onclick="delCell()">删除</button>
 15 
 16     <table id="table1" border="1" width="320">
 17         <tr>
 18             <td width="20"><input type="checkbox" /></td>
 19             <td width="100">1</td>
 20             <td width="100">1</td>
 21             <td width="100">1</td>
 22         </tr>
 23         <tr>
 24             <td><input type="checkbox"></td>
 25             <td>2</td>
 26             <td>2</td>
 27             <td>2</td>
 28         </tr>
 29     </table>
 30     <br />
 31     <table id="table2" border="1" width="320">
 32         <tr>
 33             <td width="20"><input type="checkbox" /></td>
 34             
             
             
         
         
              
             
 41             <td>你好！</td>
 42             <td>你好！</td>
 43         </tr>
 44     </table>
 45     <form name="frmRefresh" action="dynamic_table.html">
 46     </form>
 47 
 48 <script type="text/javascript">
insert a new row//50add the new cell//addCell () {function49     
         
 51         var oTargetRow = document.all("table1").insertRow();
 52         for (var k = 0; k < document.getElementById("table1").rows[0].cells.length; k++) {
 53             var oCell = oTargetRow.insertCell();
 54             if (parseInt(k) === 0) {
 55                 oCell.innerHTML = "<input type='checkbox'>";
56 is              }
 57 is              the else {
 58                  oCell.innerHTML = K;
 59              }
 60          }
 61 is      }
 62 is  
63 is      function checkAll () { // Select all cells 
64          var eInput = the document.all ( " table1 " ) .getElementsByTagName ( " INPUT " );
 65          for ( var I =  0 ; I < eInput.length; I ++ ) {
 66             eInput[i].checked = true;
 67         }
 68     }
 69 
 70     function uncheckAll() {
 71         var eInput = document.all("table1").getElementsByTagName("input");
 72         for (var i = 0; i < eInput.length; i++) {
 73             eInput[i].checked = false;
 74         }
 75     }
 76 
 77     function copyCell(){ //拷贝单元格
 78         var eInput = document.all("table1").getElementsByTagName("input");
 79         var oTargetRow = null;
 80         for (var i = 0; i < eInput.length; i++) {
 81             if (eInput[i].checked) {
 82                 var oSourceRow = eInput[i].parentElement.parentElement;
 83                 //插入新的一行
 84                 oTargetRow = document.all("table2").insertRow();
 85                 for (var k = 0; k < document.all("table1").rows[0].cells.length; k++) {
 86                     var oCell = oTargetRow.insertCell();
 87                     oCell.innerHTML = oSourceRow.cells[k].innerHTML;
 88                 }
 89             }
 90         }
 91     }
 92 
 93     function delCell(){//删除单元格
 94         var eInput = document.all("table1").getElementsByTagName("input");
 95         for (var i = eInput.length - 1; i >= 0; i--) {
 96             if (eInput[i].checked) {
 97                 var oSourceRow = eInput[i].parentElement.parentElement;
 98                 document.all("table1").deleteRow(oSourceRow.rowIndex);
 99             }
100         }
101     }
102 
103     function refresh(){ //刷新
104         frmRefresh.submit();
105     }
106 
107 </script>
108 </body>
109 </html>
JavaScript dynamic form

Guess you like
