JavaScript实现动态表格

运行效果：
源代码：
  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             <td width="100">你好！</td>
 35             <td width="100">你好！</td>
 36             <td width="100">你好！</td>
 37         </tr>
 38         <tr>
 39             <td><input type="checkbox" /></td>
 40             <td>你坏！</td>
 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">
 49     function addCell(){ //添加新的单元格
 50         //插入新的一行
 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             }
 57             else {
 58                 oCell.innerHTML = k;
 59             }
 60         }
 61     }
 62 
 63     function checkAll(){ //选中所有的单元格
 64         var eInput = 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实现动态表格

猜你喜欢
