1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>表格</title>
    7.     <style>
    8.         .table-wrapper{
    9.             width: 500px;
    10.             margin: 0 auto;
    11.         }
    12.         table{
    13.             width: 500px;
    14.             height: 400px;
    15.             text-align: center;
    16.         }
    17.         .odd{
    18.             background-color: pink;
    19.         }
    20.         .even{
    21.             background-color: cornflowerblue;
    22.         }
    23.         .hight-light{
    24.             background-color: salmon;
    25.         }
    26.     </style>
    27. </head>
    28. <body>
    29.     <div class="table-wrapper">
    30.     </div>
    31.     <script>
    32.         //页面加载完毕后执行函数
    33.         window.onload=function(){
    34.             init();
    35.             handleSelect();
    36.         }   
    37.         function init(){
    38.             let users=[
    39.                 {
    40.                     id:1,
    41.                     name:'xl',
    42.                     age:22
    43.                 },
    44.                 {
    45.                     id:2,
    46.                     name:'xw',
    47.                     age:23
    48.                 },
    49.                 {
    50.                     id:3,
    51.                     name:'xb',
    52.                     age:24
    53.                 },
    54.                 {
    55.                     id:4,
    56.                     name:'xl',
    57.                     age:22
    58.                 },
    59.                 {
    60.                     id:5,
    61.                     name:'xw',
    62.                     age:23
    63.                 },
    64.                 {
    65.                     id:6,
    66.                     name:'xb',
    67.                     age:24
    68.                 }
    69.             ]
    70.             //使用js创建表格
    71.             let wrapper = document.querySelector('.table-wrapper')
    72.             let innerHTML='<table>';
    73.             innerHTML+='<thead>';
    74.             innerHTML+='<tr><th><input type="checkbox"></th><th>序号</th><th>姓名</th><th>年龄</th></tr>';
    75.             innerHTML+='</thead>';
    76.             innerHTML+='<tbody>';
    77.             for (let user of users) {
    78.                 innerHTML+='<tr>'
    79.                 innerHTML+='<td><input type="checkbox" value=""></td>';
    80.                 innerHTML+='<td>'+user.id+'</td>';
    81.                 innerHTML+='<td>'+user.name+'</td>';
    82.                 innerHTML+='<td>'+user.age+'</td>';
    83.                 innerHTML+='</tr>'
    84.             }
    85.             innerHTML+='</tbody>';
    86.             innerHTML+='</table>';
    88.             //将字符串放进去
    89.             wrapper.innerHTML=innerHTML;
    90.             //通过js设置所有行的背景
    91.             let rows = wrapper.querySelectorAll('tbody tr')
    92.             //通过style设置样式
    93.             // for(let index in rows){
    94.             //     //判断奇偶数行
    95.             //     if(index%2==0){
    96.             //         rows[index].style.backgroundColor = 'pink';
    97.             //     }else{
    98.             //         rows[index].style.backgroundColor = ' cornflowerblue';
    99.             //     }
    100.             // }
    102.             //通过class设置样式
    103.             for (let index in rows) {
    104.                 if(index%2==0){
    105.                     // rows[index].className='odd'
    106.                     rows[index].classList.add('odd')
    107.                 }else{
    108.                     rows[index].className=' even'
    109.                 }
    110.                 //鼠标在上面的时候添加样式
    111.                 rows[index].onmouseover=function(){
    112.                     this.classList.add('hight-light')
    113.                 }
    114.                 //离开的时候删除样式
    115.                 rows[index].onmouseout=function(){
    116.                     this.classList.remove('hight-light')
    117.                 }
    118.             }
    122.         }
    124.         //实现复选框全选或全不选
    125.         function handleSelect(){
    126.             //添加事件监听
    127.             document.querySelector("thead [type='checkbox']").addEventListener('click',function(){
    128.                 let list = document.querySelectorAll("tbody [type='checkbox']");
    129.                 for (let ck of list) {
    130.                     // ck.checked = !ck.checked;
    131.                     ck.checked = this.checked;
    132.                 }
    133.             })
    134.         }
    135.   </script>
    136. </body>
    137. </html>