JavaScript 点击表格行实现背景变色

2019-7-4 10:56| 作者: antzone| 查看: 841| 评论: 0|来自: 钱柜手机网页版

如果表格行较多,可能会造成错觉,由此导致失误。

所以会采用隔行变色或者点击(鼠标悬浮也是常用的)行实现变色效果。

下面就通过代码实例介绍一下如何实现此效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<script type="text/javascript"> 
window.onload=function(){ 
  var item=document.getElementById("tb"); 
  var tbody=item.getElementsByTagName("tbody")[0]; 
  var trs=tbody.getElementsByTagName("tr"); 
  var obj=null;
  var bgColor=null;
  for(var i=0;i<trs.length;i++){ 
    if(i%2==0){ 
      trs[i].style.backgroundColor="green"; 
    } 
    trs.onclick=function(){
      if(obj!=null){obj.style.backgroundColor=bgColor;}
      bgColor=this.style.backgroundColor;
      obj=this;
      this.style.backgroundColor="red";
    }
  } 
} 
</script>
</head>
<body>
<table id="tb" border="1">
  <tbody>
    <tr>
      <td>钱柜手机网页版一</td>
      <td>钱柜手机网页版二</td>
      <td>钱柜手机网页版三</td>
    </tr>
    <tr>
      <td>钱柜手机网页版一</td>
      <td>钱柜手机网页版二</td>
      <td>钱柜手机网页版三</td>
    </tr>
    <tr>
      <td>钱柜手机网页版一</td>
      <td>钱柜手机网页版二</td>
      <td>钱柜手机网页版三</td>
    </tr>
    <tr>
      <td>钱柜手机网页版一</td>
      <td>钱柜手机网页版二</td>
      <td>钱柜手机网页版三</td>
    </tr>
    <tr>
      <td>钱柜手机网页版一</td>
      <td>钱柜手机网页版二</td>
      <td>钱柜手机网页版三</td>
    </tr>
    <tr>
      <td>钱柜手机网页版一</td>
      <td>第一行</td>
      <td>第一行</td>
    </tr>
  </tbody>
</table>
</body>
</html>

表格不但实现了隔行变色的功能,而且当点击行的时候,能够实现当前行背景变色效果。

一.代码注释:

(1).window.onload=function(){},文档内容完全加载完毕再去执行函数中的代码。

(2).var item=document.getElementById("tb"),获取表格对象。

(3). var tbody=item.getElementsByTagName("tbody")[0],获取tbody元素。

(4).var trs=tbody.getElementsByTagName("tr"),获取表格行对象集合。

(5).var obj=null,声明一个变量并赋值为null,用来存储表格行对象的引用。

(6).var bgColor=null,声明一个变量并赋值为null,用来存储表格行对象的背景色。

(7).for(var i=0;i<trs.length;i++){},通过for循环遍历每一个行对象。

(8).if(i%2==0){trs.style.backgroundColor="green";} ,将奇数行的背景色设置为绿色。

(9).trs.onclick=function(){},为每一个行注册onclick事件处理函数。

(10).if(obj!=null){obj.style.backgroundColor=bgColor;},如果obj不等于null的时候,也就是不是第一次点击行的时候,将obj的背景颜色设置为bgColor。这里的目的就是将上一个点击行的背景颜色还原。

(11).bgColor=this.style.backgroundColor,将当前行的背景色存储在bgColor。

(12).obj=this,将当前行的索引存储于obj中。

(13).this.style.backgroundColor="red",将当前行的背景颜色设置为红色。

二.相关阅读:

(1).getElementsByTagName()参阅document.getElementsByTagName()一章节。 

(2).this参阅JavaScript this 用法一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部