table表格tr行點選高亮

admin發表於2018-12-03

 本文介紹一下如何實現點選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行實現當前行高亮效果。

相關文章