JS创建表格完整 

  1 <!DOCTYPE>  
  2 <html>  
  3 <head>  
  4 <meta charset=utf-8 />  
  5 <title>动态表格</title>  
  6 <!-- 增加表格头的样式   -->
  7 <style type="text/css">  
  8         #list th{  
  9             background-color:#06F;  
 10             }  
 11 </style>  
 12 </head>  
 13   
 14 <body>  
 15 <table border="1" align="center" width="500PX">  
 16     <thead>  
 17       <!-- 创建表格头 -->
 18     <tr id="list">  
 19         <th>选中</th>   
 20         <th>编号</th>  
 21         <th>姓名</th>  
 22         <th>密码</th>  
 23         <th>年龄</th>  
 24         <th>地址</th>  
 25         <th>操作</th>  
 26     </tr>  
 27        <!-- 添加全部删除按钮， -->  
 28     <tr>  
 29         <td ><input type="checkbox" onclick="checkAll(this)" /></td>  
 30         <td colspan="6" ><a href="javascript:void(0)" onclick="delAll()">全部删除</a></td>  
 31     </tr>  
 32     </thead>  
 33     <tbody id="listbody"></tbody>  
 34 </table>  
 35  <!-- 用于画一个横线 -->   
 36 <hr/>  
 37   <!-- 创建form表单  --> 
 38 <form >  
 39     <table align="center" border="1" width="300px">  
 40         <tr>  
 41             <th >编号</th>  
 42             <td> <input type="text" id="id" /></td>  
 43         </tr>  
 44         <tr>  
 45             <th>姓名</th>  
 46           <td> <input type="text" id="name" /></td>  
 47         </th>  
 48         <tr>  
 49             <th>密码</th>  
 50            <td> <input type="text" id="pass" /></td>  
 51         </tr>  
 52         <tr>  
 53             <th>年龄</th>  
 54             <td> <input type="text" id="age" /></td>  
 55         </tr>  
 56         <tr>  
 57             <th>住址</th>  
 58             <td> <input type="text" id="address" /></td>  
 59         </tr>  
 60         <tr>  
 61             <td colspan="2" align="center">  
 62                 <input type="reset" value="重置" align="center" />  
 63                 <input type="button" value="添加" align="center" onclick="addlist()"/>  
 64             </td>  
 65         </tr>  
 66       
 67     </table>  
 68   
 69 </form>  
 70   
 71 </body>  
 72 <script type="text/javascript">  
 73     function addlist(){  
 74         //获取用户输入  
 75         var id=document.getElementById("id").value;  
 76         var name = document.getElementById("name").value;  
 77         var pass = document.getElementById("pass").value;  
 78         var age = document.getElementById("age").value;  
 79         var address = document.getElementById("address").value;  
 80         //在上面的列表中添加一行，把内容放在该行1  
 81         /*  
 82          <tr>  
 83             <td><input type="checkbox" name="item"/></td>  
 84             <td>1</td>  
 85             <td>张三</td>  
 86             <td>123456</td>  
 87             <td>20</td>  
 88             <td>广州天河</td>  
 89             <td><a href="javascript:void(0)" onclick="delOne(this)">删除</a></td>  
 90                 javascript:void(0): 相当于让href属性失效！！  
 91         </tr>  
 92         */  
 93         //创建一个tr  
 94         var tr = document.createElement("tr");  
 95         //创建td  
 96         var td1 = document.createElement("td");  
 97         var input = document.createElement("input");  
 98         input.setAttribute("type","checkbox");  
 99         input.setAttribute("name","item");  
100         td1.appendChild(input);  
101           
102         var td2 = document.createElement("td");  
103         td2.innerHTML = id;  
104           
105         var td3 = document.createElement("td");  
106         td3.innerHTML = name;  
107           
108         var td4 = document.createElement("td");  
109         td4.innerHTML = pass;  
110           
111         var td5 = document.createElement("td");  
112         td5.innerHTML = age;  
113           
114         var td6 = document.createElement("td");  
115         td6.innerHTML = address;  
116           
117         var td7 = document.createElement("td");  
118         var a = document.createElement("a");  
119           
120         a.setAttribute("href","javascript:void(0)");//相当于让href属性失效！  
121         a.setAttribute("onclick","delone(this)")  
122         a.innerHTML = "删除";  
123         td7.appendChild(a);  
124         //将创建的td添加到tr中  
125         tr.appendChild(td1);  
126         tr.appendChild(td2);  
127         tr.appendChild(td3);  
128         tr.appendChild(td4);  
129         tr.appendChild(td5);  
130         tr.appendChild(td6);  
131         tr.appendChild(td7);  
132         //使用appendChild（tr）方法，将tr添加到listbody中  
133         //其中获取的listbody是要将表格添加的位置的id  
134         var listbody = document.getElementById("listbody");  
135         listbody.appendChild(tr);  
136           
137         }  
138         //删除单行  
139         function delone(d){  
140             var tr = d.parentNode.parentNode;  
141             var listbody  = document.getElementById("listbody");  
142             listbody.removeChild(tr);  
143               
144             }  
145             //全选  
146               
147             function checkAll(c){  
148                 //得到全选按钮的状态  
149                 var status = c.checked;  
150                 //得到name=item的标签  
151                 var items = document.getElementsByName("item");  
152                 for(var i=0;i<items.length;i++){  
153                     //将全选按钮的状态给所有的items  
154                     items[i].checked=status;  
155                       
156                     }  
157                 }  
158                 //删除选中部分，注意变量，每删除一个，要将变量减一，否则，将导致变量溢出，浏览器死机  
159         function delAll(){  
160               
161             var list = document.getElementById("listbody");  
162             //拿到所有的item  
163             var items = document.getElementsByName("item");  
164             for(var j=0;j<items.length;j++){  
165                   
166                 if(items[j].checked)//如果item被选中  
167                 {  
168                       
169                     var tr = items[j].parentNode.parentNode;  
170                     list.removeChild(tr);  
171                     j--;  
172                 }  
173             }  
174             }  
175               
176 </script>  
177 </html>

 

posted @ 2017-12-12 20:44  Mr·Liu  阅读(13667)  评论(1)    收藏  举报