1. 表格隔行变色

表格隔行变色

1. 表格隔行变色，主要使用循环为鼠标添加事件，改变每行的背景颜色实现。

 <style>

    table {
      width: 800px;
      margin: 100px auto;
      text-align: center;
      border-collapse: collapse;
      font-size: 14px;
    }

    thead tr {
      height: 30px;
      background-color: skyblue;
    }

    tbody tr {
      height: 30px;
    }

    tbody td {
      border-bottom: 1px solid #d7d7d7;
      font-size: 12px;
      color: blue;
    }

    .bg {
      background-color: pink;
    }
  </style>

<table>
  <thead>
  <tr>
    <th>代码</th>
    <th>名称</th>
    <th>最新公布净值</th>
    <th>累计净值</th>
    <th>前单位净值</th>
    <th>净值增长率</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>003526</td>
    <td>农银金穗3个月定期开放债券</td>
    <td>1.075</td>
    <td>1.079</td>
    <td>1.074</td>
    <td>+0.047%</td>
  </tr>
  <tr>
    <td>003526</td>
    <td>农银金穗3个月定期开放债券</td>
    <td>1.075</td>
    <td>1.079</td>
    <td>1.074</td>
    <td>+0.047%</td>
  </tr>
  <tr>
    <td>003526</td>
    <td>农银金穗3个月定期开放债券</td>
    <td>1.075</td>
    <td>1.079</td>
    <td>1.074</td>
    <td>+0.047%</td>
  </tr>
  <tr>
    <td>003526</td>
    <td>农银金穗3个月定期开放债券</td>
    <td>1.075</td>
    <td>1.079</td>
    <td>1.074</td>
    <td>+0.047%</td>
  </tr>
  <tr>
    <td>003526</td>
    <td>农银金穗3个月定期开放债券</td>
    <td>1.075</td>
    <td>1.079</td>
    <td>1.074</td>
    <td>+0.047%</td>
  </tr>
  <tr>
    <td>003526</td>
    <td>农银金穗3个月定期开放债券</td>
    <td>1.075</td>
    <td>1.079</td>
    <td>1.074</td>
    <td>+0.047%</td>
  </tr>
  </tbody>
</table>

<script>

  let tr = document.querySelector('tbody').querySelectorAll("tr");
  for (let i = 0; i < tr.length; i++) {
    tr[i].onmouseover = function () {
      this.className = 'bg';
    }

    tr[i].onmouseout = function () {
      this.className = '';
    }
  }

</script>

2. 全选和反选 （难点）

全选和反选

1. 难点：如何实现子选项的选中状态 ，控制复选项的选中状态？ 需要使用一个额外的变量flag。通过监听每一个子选项的事件控制flag的状态。核心代码 ：

  // 循环为每一个单选框设置单击事件
  for (let i = 0; i < checkNode.length; i++) {
    checkNode[i].onclick = function () {
      // 这是一个新的作用域
      let flag = true; // 默认设置为全部选中状态
      for (let i = 0; i < checkNode.length; i++) {
        // 如果有一个未选中 将flag 设置为false
        if (!checkNode[i].checked) {
          flag = false;
        }
      }
      // 将flag的值赋值给 checkAll
      checkAll.checked = flag;
    }
  }

2. 全部代码:

<style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }

    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }

    td {
      font: 14px "微软雅黑";
    }

    tbody tr {
      background-color: #f0f0f0;
    }

    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>

<div class="wrap">
  <table>
    <thead>
    <tr>
      <th>
        <input type="checkbox" id="j_cbAll"/>
      </th>
      <th>商品</th>
      <th>价钱</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>iPhone8</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>iPad Pro</td>
      <td>5000</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>iPad Air</td>
      <td>2000</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>Apple Watch</td>
      <td>2000</td>
    </tr>

    </tbody>
  </table>
</div>

<script>
  let checkAll = document.getElementById('j_cbAll');
  let checkNode = document.getElementById('j_tb').getElementsByTagName('input');
  // 全选和反选
  checkAll.onclick = function () {
    for (let i = 0; i < checkNode.length; i++) {
      checkNode[i].checked = this.checked;
    }
  }

  // 循环为每一个单选框设置单击事件
  for (let i = 0; i < checkNode.length; i++) {
    checkNode[i].onclick = function () {
      // 这是一个新的作用域
      let flag = true; // 默认设置为全部选中状态
      for (let i = 0; i < checkNode.length; i++) {
        // 如果有一个未选中 将flag 设置为false
        if (!checkNode[i].checked) {
          flag = false;
        }
      }
      // 将flag的值赋值给 checkAll
      checkAll.checked = flag;
    }
  }
</script>