用js操作表格
Posted ╭ 儛動嘚靈魂
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用js操作表格相关的知识，希望对你有一定的参考价值。
实现思路：
1.通过表单，可以添加数据到表格中显示
2.id自动根据已有的最大id值进行累加，删除一条记录的时候，最大id值不会变化（id的值不是根据表格中编号的最大值去计算）
3.隔行变色，新增加的行应该也需要隔行变色的
4.鼠标移入高亮
5.全选/全不选（checkAll和下面的每一个checkbox是有关联的）
6.选中变色
7.上移/下移
8.删除
9.排序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 form { 8 margin: 10px 0; 9 } 10 td { 11 text-align: center; 12 } 13 14 .c1 { 15 background: #CCCCCC; 16 } 17 .c2 { 18 background: white; 19 } 20 .c3 { 21 background: #ff9900; 22 } 23 .c4 { 24 background: #186318; 25 color: white; 26 } 27 </style> 28 <script> 29 30 var data = [ 31 { 32 id: 1, 33 name : ‘欢欢‘, 34 sex : ‘女‘, 35 age : 22 36 }, 37 { 38 id: 2, 39 name : ‘小明‘, 40 sex : ‘男‘, 41 age : 28 42 }, 43 { 44 id: 3, 45 name : ‘芊芊‘, 46 sex : ‘女‘, 47 age : 18 48 } 49 ]; 50 51 var maxId = 3; 52 53 window.onload = function() { 54 var tab = document.getElementById(‘tab1‘); 55 var tbody = tab.tBodies[0]; 56 57 //获取表单元素 58 var form1 = document.getElementById(‘form1‘); 59 var form2 = document.getElementById(‘form2‘); 60 61 var checkAll = document.getElementById(‘checkAll‘); 62 63 //初始化数据的添加 64 //addData(data[0]); 65 for ( var i=0; i<data.length; i++ ) { 66 addData(data[i]); 67 } 68 //初始化隔行变色 69 changeColor(); 70 71 //通过表单添加数据 72 form1.btn.onclick = function() { 73 74 if ( form1.username.value == ‘‘ || form1.age.value == ‘‘ || form1.sex.value == ‘‘ ) { 75 alert(‘请输入完整的数据‘); 76 } else { 77 78 //添加数据到表格中 79 maxId++; 80 addData({ 81 id: maxId, 82 name : form1.username.value, 83 sex : form1.sex.value, 84 age : form1.age.value 85 }); 86 //每次添加新数据的时候，重新调用隔行变色 87 changeColor(); 88 89 //因为新增数据是一定未选中的，那么全选也应该是未选中的 90 checkAll.checked = false; 91 92 } 93 94 } 95 96 //点击checkAll，全选和全不选 97 checkAll.onclick = function() { 98 var checkBoxes = tbody.getElementsByTagName(‘input‘); 99 var trs = tbody.rows; 100 101 for ( var i=0; i<checkBoxes.length; i++ ) { 102 103 checkBoxes[i].checked = this.checked; 104 105 if (this.checked) { 106 //全选 107 trs[i].className = ‘c4‘; 108 } else { 109 //全不选 110 trs[i].className = trs[i].oldColor; 111 } 112 113 } 114 } 115 116 //排序 117 form2.orderButton.onclick = function() { 118 if ( form2.orderName.value == ‘‘ || form2.orderBy.value == ‘‘ ) { 119 alert(‘请选择排序方式和排序字段‘) 120 } else { 121 order( form2.orderName.value, form2.orderBy.value ); 122 } 123 } 124 125 /* 126 * 把单条数据添加到表格中 127 * @params object data 要添加到表格中的单条数据 128 * @return 129 * */ 130 function addData(data) { 131 132 //每一条数据需要创建一个tr，6个td，每个td里面放置对应的内容 133 134 var tr = document.createElement(‘tr‘); 135 136 //checkbox 137 var td0 = document.createElement(‘td‘); 138 139 //因为checkbox需要绑定事件，我们这里使用createElement的方式来创建checkbox 140 var checkbox = document.createElement(‘input‘); 141 checkbox.type = ‘checkbox‘; 142 143 //给checkbox添加onclick选择 144 checkbox.onclick = function() { 145 //根据当前的checkbox是否选中，去处理当前这一行的背景色 146 if (this.checked) { 147 //如果当前是选中的，把当前行class设置成c4 148 tr.className = ‘c4‘; 149 } else { 150 //如果当前不是选中的 151 tr.className = ‘c3‘; 152 } 153 154 //处理全选 155 var checkBoxes = tbody.getElementsByTagName(‘input‘); 156 //循环查看tbody里面的所有checkbox元素，只要有一个是没选中的，那么就非全选，否则就是全选 157 for ( var i=0; i<checkBoxes.length; i++ ) { 158 if ( !checkBoxes[i].checked ) { 159 checkAll.checked = false; 160 return; 161 } 162 } 163 164 //如果代码能走到这里来，就说明上面的循环过程中，所有的checkbox都是选中的 165 checkAll.checked = true; 166 } 167 168 td0.appendChild(checkbox); 169 170 tr.appendChild(td0); 171 172 //编号 173 var td1 = document.createElement(‘td‘); 174 td1.innerHTML = data.id; 175 tr.appendChild(td1); 176 177 //姓名 178 var td2 = document.createElement(‘td‘); 179 td2.innerHTML = data.name; 180 tr.appendChild(td2); 181 182 //性别 183 var td3 = document.createElement(‘td‘); 184 td3.innerHTML = data.sex; 185 tr.appendChild(td3); 186 187 //年龄 188 var td4 = document.createElement(‘td‘); 189 td4.innerHTML = data.age; 190 tr.appendChild(td4); 191 192 //操作 193 var td5 = document.createElement(‘td‘); 194 195 var btn0 = document.createElement(‘button‘); 196 btn0.innerHTML = ‘上移‘; 197 //上移 198 btn0.onclick = function() { 199 //把当前行的tr添加到tr的上一个兄弟节点的前面 200 if ( tr.previousElementSibling ) { 201 tbody.insertBefore( tr, tr.previousElementSibling ); 202 changeColor(); 203 } 204 } 205 td5.appendChild(btn0); 206 207 var btn1 = document.createElement(‘button‘); 208 btn1.innerHTML = ‘下移‘; 209 //下移 210 btn1.onclick = function() { 211 //把当前行的tr添加到tr的下一个兄弟节点的后面 212 if ( tr.nextElementSibling ) { 213 tbody.insertBefore( tr.nextElementSibling, tr ); 214 changeColor(); 215 } 216 } 217 td5.appendChild(btn1); 218 219 var btn2 = document.createElement(‘button‘); 220 btn2.innerHTML = ‘删除‘; 221 //删除 222 btn2.onclick = function() { 223 tbody.removeChild(tr); 224 changeColor(); 225 226 //处理全选 227 var checkBoxes = tbody.getElementsByTagName(‘input‘); 228 if (checkBoxes.length) { 229 //循环查看tbody里面的所有checkbox元素，只要有一个是没选中的，那么就非全选，否则就是全选 230 for ( var i=0; i<checkBoxes.length; i++ ) { 231 if ( !checkBoxes[i].checked ) { 232 checkAll.checked = false; 233 return; 234 } 235 } 236 237 //如果代码能走到这里来，就说明上面的循环过程中，所有的checkbox都是选中的 238 checkAll.checked = true; 239 } 240 241 } 242 td5.appendChild(btn2); 243 244 tr.appendChild(td5); 245 246 //给每一行添加鼠标移入移出的事件处理函数 247 //鼠标移入 248 tr.onmouseover = function() { 249 //鼠标移入的时候也需要根据当前tr里面的checkbox的状态去设置tr的class 250 if (checkbox.checked) { 251 this.className = ‘c4‘; 252 } else { 253 this.className = ‘c3‘; 254 } 255 } 256 //鼠标移出 257 tr.onmouseout = function() { 258 //当鼠标离开tr的时候，需要根据当前tr里面的checkbox的状态去设置当前tr的class 259 if (checkbox.checked) { 260 //如果当前tr里面的checkbox是选中的，那么离开tr以后，这个tr的class应该还是c4 261 this.className = ‘c4‘; 262 } else { 263 //如果当前tr里面的checkbox不是选中的，那么离开这个tr以后，应该回到当前tr最开始class 264 this.className = this.oldColor; 265 } 266 } 267 268 tbody.appendChild(tr); 269 } 270 271 /* 272 * 隔行变色 273 * @return 274 * */ 275 function changeColor() { 276 for ( var i=0; i<tbody.rows.length; i++ ) { 277 278 var checkbox = tbody.rows[i].querySelector(‘input‘); 279 280 //如果当前行是选中的，那么就不需要重新设置隔行变色 281 if ( !checkbox.checked ) { 282 if ( i % 2 == 0 ) { 283 //偶数行 284 tbody.rows[i].className = ‘c1‘; 285 tbody.rows[i].oldColor = ‘c1‘; 286 } else { 287 //奇数行 288 tbody.rows[i].className = ‘c2‘; 289 tbody.rows[i].oldColor = ‘c2‘; 290 } 291 } 292 293 } 294 } 295 296 /* 297 * 排序 298 * */ 299 function order(orderName, orderBy) { 300 301 var rows = []; 302 303 for ( var i=0; i<tbody.rows.length; i++ ) { 304 rows.push(tbody.rows[i]); 305 } 306 307 rows.sort(function(a, b) { 308 309 var v1; 310 var v2; 311 312 //需要根据orderName和orderBy来排序 313 314 if ( orderName == ‘id‘ ) { 315 v1 = parseFloat(a.cells[1].innerHTML); 316 v2 = parseFloat(b.cells[1].innerHTML); 317 } 318 319 if ( orderName == ‘age‘ ) { 320 v1 = parseFloat(a.cells[4].innerHTML); 321 v2 = parseFloat(b.cells[4].innerHTML); 322 } 323 324 //asc : 升序 325 //desc : 降序 326 if (orderBy == ‘asc‘) { 327 return v1 - v2; 328 } else { 329 return v2 - v1; 330 } 331 332 }); 333 334 //console.log(rows) 335 for (var i=0; i<rows.length; i++) { 336 tbody.appendChild(rows[i]); 337 } 338 changeColor(); 339 } 340 } 341 </script> 342 </head> 343 344 <body> 345 <form id="form1"> 346 <input type="text" name="username" /> 347 <select name="sex"> 348 <option value="">请选择一个性别</option> 349 <option value="男">男</option> 350 <option value="女">女</option> 351 </select> 352 <input type="text" name="age" /> 353 <input type="button" name="btn" value="提交"> 354 </form> 355 <!--选做--> 356 <p> 357 <form id="form2"> 358 <select name="orderName"> 359 <option value="">选择一个排序字段</option> 360 <option value="id">编号</option> 361 <option value="age">年龄</option> 362 </select> 363 <select name="orderBy"> 364 <option value="">选择一个排序方式</option> 365 <option value="asc">升序</option> 366 <option value="desc">降序</option> 367 </select> 368 <input type="button" name="orderButton" value="排序"> 369 </form> 370 </p> 371 <table border="1" width="100%" id="tab1"> 372 <thead> 373 <tr> 374 <th>全选 <input type="checkbox" id="checkAll"></th> 375 <th>编号</th> 376 <th>姓名</th> 377 <th>性别</th> 378 <th>年龄</th> 379 <th>操作</th> 380 </tr> 381 </thead> 382 <tbody></tbody> 383 </table> 384 </body> 385 </html>
以上是关于用js操作表格的主要内容，如果未能解决你的问题，请参考以下文章