[JS笔记]js控制table表格高亮

最新推荐文章于 2022-09-28 17:18:51 发布

一颗甜橙树

最新推荐文章于 2022-09-28 17:18:51 发布

阅读量623

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/kikikiuu/article/details/109160271

版权

JS 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

最近发现自己js的东西忘记了很多，写几个小demo,温故而知新，可以为师矣~

一、鼠标移入的时候高亮

知识点：
onmouseover鼠标移进的时候
onmouseout 鼠标移出的时候
this 当前的对象

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            #table-tab{
                text-align: center;
                border: 1px solid black;
                width: 600px;
                border-collapse:collapse;
              
            }
            #table-body >tr {
                background-color: #fff;
                border: 1px solid black;
                height: 60px;
            }
    </style>
</head>
<body>
    <table id='table-tab' cellspacing="10">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id='table-body'>
            <tr>
                <td>1</td>
                <td>李四</td>
                <td>20</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小明</td>
                <td>10</td>
            </tr>
            <tr>
                <td>3</td>
                <td>小红</td>
                <td>40</td>
            </tr>
            <tr>
                <td>4</td>
                <td>小蓝</td>
                <td>15</td>
            </tr>
            <tr>
                <td>6</td>
                <td>小华</td>
                <td>13</td>
            </tr>
        </tbody>
    </table>
    <script src="hoverTable.js"></script>
</body>

</html>

hoverTable.js

// 知识点：
//onmouseover 鼠标移进的时候
//onmouseout  鼠标移出的时候
//this 当前的对象

window.onload=function(){
var tableEvent=document.getElementById('table-tab')
var allTableEvents=tableEvent.tBodies[0].getElementsByTagName('tr')
for(var i=0;i<allTableEvents.length;i++){
    // 鼠标移进的时候触发的事件
    allTableEvents[i].onmouseover=function(){
        //修改背景色
        this.style.backgroundColor='yellow'
    }
    //鼠标移除的时候触发的事件
    allTableEvents[i].onmouseout=function(){
        //恢复原来的颜色
        this.style.backgroundColor="white"
    }
}
}

二、鼠标点击的时候高亮

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>table被鼠标点击时显示颜色</title>
<script type="text/javascript">
function init() {
  var tbm = document.getElementById("tableMain");
  var trs = tbm.getElementsByTagName("tr");
  for (var i = 0; i < trs.length; i++) {
 trs[i].onclick = trOnClick;
  }
}
function trOnClick() {
  var tbm = document.getElementById("tableMain");
  var trs = tbm.getElementsByTagName("tr");
  for (var i = 0; i < trs.length; i++) {
 if (trs[i] == this) {  //判断是不是当前选择的行
   trs[i].style.background = "yellow";
 }
 else {
   trs[i].style.background = "white";
 }
  }
}
</script>
</head>
<body onload="init()">
<table id="tableMain" border="1" style="width:200px;border-collapse:collapse">
<tr>
  <td>1</td>
  <td>三星</td>
  <td>AA</td>
</tr>
<tr>
  <td>2</td>
  <td>华为</td>
  <td>BB</td>
</tr>
<tr>
  <td>3</td>
  <td>苹果</td>
  <td>CC</td>
</tr>
<tr>
  <td>4</td>
  <td>联想</td>
  <td>DD</td>
</tr>
</table>
</body>
</html>