Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0} /*.main{margin:100px auto;width: 800px} table{border: 1px solid #ccc;border-collapse: collapse;width: 100%} td:{width: 800px; border: 1px solid #ccc;text-align: center;}*/ .main{width:800px;margin:50px auto;} table{ width:100%; border: 1px solid #ccc; border-collapse: collapse; } td{ width:800px;border: 1px solid #ccc; text-align: center; line-height: 40px; } th{ width:800px;border: 1px solid #ccc; text-align: center; } </style> <!-- <script type="text/javascript" src="static/js/jquery.js"> </script> --> </head> <body> <div class="main"> <table class="select"> <caption>文章列表</caption> <thead> <tr> <th><input type="checkbox" onclick="checkAll()">全选</th> <th>文章标题</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="list"></td> <td>文章标题1</td> <td>文章状态1</td> </tr> <tr> <td><input type="checkbox" name="list"></td> <td>文章标题2</td> <td>文章状态2</td> </tr> <tr> <td><input type="checkbox" name="list"></td> <td>文章标题3</td> <td>文章状态3</td> </tr> <tr> <td><input type="checkbox" name="list"></td> <td>文章标题4</td> <td>文章状态4</td> </tr> <tr> <td><input type="checkbox" name="list"></td> <td>文章标题5</td> <td>文章状态5</td> </tr> </tbody> </table> </div> <script type="text/javascript"> function bgColor(){ var trlist=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr'); for(var k=0;k<trlist.length;k++){ if(k%2==0){ trlist[k].style.background='#ccc'; }else{ // trlist[k].style.background='red'; } } } bgColor(); function checkAll(){ var objList=document.getElementsByName('list'); console.log("objList="+objList.length); var count=0; for(var i=0;i<objList.length;i++){ if(objList[i].checked){ count++; }else{ console.log(i+':未执行!') objList[i].checked=true; } } console.log(i); console.log(count); if(count==objList.length){ for(var j=0;j<objList.length;j++){ objList[j].checked=false } } } </script> </body> </html>
点击 "运行实例" 按钮查看在线实例
心得:
操作中出了2个BUG
1、表格实现隔行换色,但是一直只在表头中出现要的颜色,与之前课堂上做的案例不同
在控制台中发现网页代码有两个tbody
后来发现是因为表格中标题caption放的位置不对,把cation放在thead前即可
2、实现单独全选功能,一直无法实现全部选择
利用console.log发现功能当已经全选后取消全选勾选的功能未实现
检查代码发现是一个if判断中条件数值比较只写了一个=。数值对比要用到==或===