table表格tr行点击高亮

2018-12-3 16:59| 作者: admin| 查看: 105| 评论: 0|来自: 蚂蚁部落

 本文介绍一下如何实现点击tr行实现当前行高亮效果。

表格行数量较多,那么可以很好的提高辨识度。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">  
#tb{ 
  background-color:green; 
  font-size:12px; 
} 
#tb th,#tb td{
  width:150px; 
  height:30px; 
  line-height:30px;
  text-align:center; 
}
#tb th{background-color:#CCF} 
#tb td{background-color:#FFF}
#tb .hover td{background-color:#CCC} 
</style>  
<script>
window.onload=function(){
  let otb=document.getElementById("tb");
  let otr=otb.getElementsByTagName("tr");
  for(let index=1;index<otr.length;index++){
    otr[index].onclick=function(){
      for(let i=1;i<otr.length;i++){
        otr[i].className="";
      }
      this.className="hover"
    }
  }
}
</script>
</head>  
<body>  
<table cellpadding="0" cellspacing="1" id="tb"> 
  <tr> 
    <th>标题一</th> 
    <th>标题二</th> 
    <th>标题三</th> 
    <th>标题四</th> 
  </tr> 
  <tr> 
    <td>蚂蚁部落一</td> 
    <td>蚂蚁部落二</td> 
    <td>蚂蚁部落三</td> 
    <td>蚂蚁部落四</td> 
  </tr> 
  <tr> 
    <td>蚂蚁部落一</td> 
    <td>蚂蚁部落二</td> 
    <td>蚂蚁部落三</td> 
    <td>蚂蚁部落四</td> 
  </tr> 
  <tr> 
    <td>蚂蚁部落一</td> 
    <td>蚂蚁部落二</td> 
    <td>蚂蚁部落三</td> 
    <td>蚂蚁部落四</td> 
  </tr> 
</table> 
</body>  
</html>

上述代码实现了,点击tr行实现当前行高亮效果。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部