黑马程序员技术交流社区

标题: 每日学习 [打印本页]

作者: huhongxu 时间: 2019-6-5 19:36
标题: 每日学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
      table{
         border: 1px solid;
         width: 500px;
         margin-left: 30%;
      }
      td,th{
         text-align: center;
         border: 1px solid;
      }
      div{
         margin-top: 10px;
         margin-left: 30%;
      }
      .out{
         background-color: white;
      }
      .over{
         background-color: plum;
      }
</style>
<script>
      window.onload =function () {
         document.getElementById("selectAll").onclick =function () {
            //全选
            var cbs =document.getElementsByName("cb");
            for (var i =0; i<cbs.length; i++){
                  cbs[i].checked =true;
            }
         }
         document.getElementById("unSelectAll").onclick =function () {
            //全不选
            var cbs =document.getElementsByName("cb");
            for (var i=0; i<cbs.length; i++){
                  cbs[i].checked =false;
            }
         }
         document.getElementById("selectEev").onclick =function () {
            //反选
            var cbs =document.getElementsByName("cb");
            for (var i=0; i<cbs.length; i++){
                  cbs[i].checked =!cbs[i].checked;
            }
         }
         document.getElementById("firstCb").onclick =function () {
            var cbs =document.getElementsByName("cb");
            for (var i =0; i<cbs.length; i++){
                  cbs[i].checked =this.checked;
            }
         }
         var  trs =document.getElementsByTagName("tr");
         for (var i=0;i<trs.length; i++){
            trs[i].onmouseover =function () {
                  this.className ="over";
            }
            trs[i].onmouseout =function () {
                  this.className ="out"
            }
         }
      }
</script>
</head>
<body>
<table>
<caption>学信表</caption>
<tr>
      <th><input type="checkbox" name="cb" id="firstCb"></th>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>1</td>
<td>朱柏忌</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
      <td><input type="checkbox" name="cb"></td>
      <td>1</td>

      <td>朱柏忌</td>
      <td>男</td>
      <td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
      <td><input type="checkbox" name="cb"></td>
      <td>1</td>
      <td>朱柏忌</td>
      <td>男</td>
      <td><a href="javascript:void(0);">删除</a></td>
</tr>

</table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectEev" value="反选">
</div>
</body>
</html>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2