[移动开发] 【table行换颜色】点击移动table切换颜色

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 【table行换颜色】点击移动table切换颜色 -> 正文阅读

[移动开发]【table行换颜色】点击移动table切换颜色

?首先头文件定义样式，我的比较挫

        table {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
            width: 90%
        }

        table td, table th {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }

        table thead th {
            background-color: #CCE8EB;
            width: 100px;
        }

        table tr:nth-child(odd) {
            background: #fff;
        }

        table tr:nth-child(even) {
            background: #fafafa;
        }

        /*js实现*/
        /*table tr:hover, */
        table tr.hilite {
            background: #f5f7fa;
        }

        table tr.select {
            background: #8896b3;
        }

        table tr#select td {
            background: #8896b3;
            color: #fff;
        }

html中定义我们的表格

<body>
<table class="table">
    <caption>
        <h2>
            表格行换背景色</h2>
    </caption>
    <thead>
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    </thead>
    <tr class="row">
        <td>Apple</td>
        <td>Steven Jobs</td>
        <td>USA</td>
    </tr>
    <tr class="row">
        <td>Baidu</td>
        <td>Li YanHong</td>
        <td>China</td>
    </tr>
    <tr class="row">
        <td>Google</td>
        <td>Larry Page</td>
        <td>USA</td>
    </tr>
    <tr class="row">
        <td>Lenovo</td>
        <td>Liu Chuanzhi</td>
        <td>China</td>
    </tr>
    <tr class="row">
        <td>Microsoft</td>
        <td>Bill Gates</td>
        <td>USA</td>
    </tr>
    <tr class="row">
        <td>Nokia</td>
        <td>Stephen</td>
        <td>Finland</td>
    </tr>
</table>
</body>

然后就是我们的js代码，我是通过循环给每个tr设置鼠标移入移出点击事件实现的

  // 拉取每一行tr
  let rows = document.querySelectorAll('.row')
  // 遍历
  rows.forEach(item => {
    // 设置鼠标移入增加样式
    item.onmouseover = () => item.className = 'hilite'
    // 鼠标移出将我们加入的样式替换为空,是replace,不是直接赋值,防止删去了其他的类名
    item.onmouseout = () => item.className = item.className.replace('hilite', '')
    // 点击事件
    item.onclick = () => {
      // 如果点击的那行已经被点击了(就是已经有了id)
      if (item.id) {
        // 置空,然后直接return
        item.id = item.id.replace('select', '')
        return
      }
      // 点击的那行没有id,那我们就先把整的table的tr的id置空
      rows.forEach(item => item.id = '')
      // 然后为我们点击的该行设置id,给予样式
      item.id = 'select'
    }
  })