标签：pointer 序号 四川 over size check ntb 页面 意思
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>JS全选，复选框</title> </head> <body> <table id="mytable"> <tr> <th><input type="checkbox" id="quan"/></th> <th>序号</th> <th>姓名</th> <th>性别</th> <th>地址</th> </tr> <tr> <td><input type="checkbox"/></td> <td>1</td> <td>张三</td> <td>女</td> <td>四川省成都市</td> </tr> <tr> <td><input type="checkbox"/></td> <td>2</td> <td>李斯</td> <td>女</td> <td>四川省成都市</td> </tr> <tr> <td><input type="checkbox"/></td> <td>3</td> <td>玩玩玩</td> <td>男</td> <td>四川省成都市</td> </tr> <tr> <td><input type="checkbox"/></td> <td>4</td> <td>哈哈哈</td> <td>女</td> <td>四川省成都市</td> </tr> </table> <script> // onload事件 页面加载完直接运行 window.onload = function () { var mytable = document.getElementById("mytable"); var qq = document.getElementById("quan"); mytable.style.border = "1px solid gray"; mytable.style.borderCollapse = "collapse"; mytable.style.textAlign = "center"; mytable.style.width = "800px"; //以上是给table表格添加样式 //使用循环获取到表格的tr长度 for (i = 1; i < mytable.rows.length; i++) { //因为复选框是tr里的第一个，所以cells里的数组下标为0 mytable.rows[i].cells[0].firstChild.onclick = function () { //当我点击它，就做判断 //先判断它本身是被选中的就往下面走 if (this.checked) { //如果它被选中我们就走进for循环 for (j = 1; j < mytable.rows.length; j++) { //获取tr的长度，然后判断所有的复选框 if (!mytable.rows[j].cells[0].firstChild.checked) { //如果这些复选框，有一个没有被选中，全选就变成未被选中 qq.checked = false; return true; //最后结束返回 true } } //if判断，所有复选框都是选中的，就让全选变成true 变成选中 qq.checked=true; } else { //如果它本身没有被选中，全选当然是变成false 未被选中 qq.checked = false; } } } //点击全选的复选框，将所有的复选框变成和它一样，要么选中，要么未选中 qq.onclick=function() { for (i = 1; i < mytable.rows.length; i++) { mytable.rows[i].cells[0].firstChild.checked = this.checked; } }; //以下是循环并判断表格里的tr和td，添加css样式 for (i = 0; i < mytable.rows.length; i++) { if (i == 0) { mytable.rows[0].style.backgroundColor = "lightgray"; } else { mytable.rows[i].onmouseover = function () { this.style.backgroundColor = "red"; }; mytable.rows[i].style.cursor = "pointer"; if (i % 2 == 0) { mytable.rows[i].style.backgroundColor = "yellow"; mytable.rows[i].onmouseout = function () { this.style.backgroundColor = "yellow"; } } else { mytable.rows[i].style.backgroundColor = "orange"; mytable.rows[i].onmouseout = function () { this.style.backgroundColor = "orange"; } } } for (j = 0; j < mytable.rows[i].cells.length; j++) { var c = mytable.rows[i].cells[j]; c.style.border = "1px solid gray"; } } } </script> </body> </html>
标签：pointer 序号 四川 over size check ntb 页面 意思
原文地址：http://www.cnblogs.com/longfeng995/p/7590426.html
