javascrip案例1——表格变色

JS 表格变色

前言

js中处理表格变色的方式，有默认变色、有鼠标经过离开变色，有点击变色。以下是结构部分。

<table border="1" cellspacing="0">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>手机号</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小狐狸</td>
            <td>女</td>
            <td>18</td>
            <td>18899990000</td>
        </tr>
        <tr>
            <td>小狐狸</td>
            <td>女</td>
            <td>18</td>
            <td>18899990000</td>
        </tr>
        <tr>
            <td>小狐狸</td>
            <td>女</td>
            <td>18</td>
            <td>18899990000</td>
        </tr>
        <tr>
            <td>小狐狸</td>
            <td>女</td>
            <td>18</td>
            <td>18899990000</td>
        </tr>
    </tbody>
</table>

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、偶数行变色

var tbody = document.getElementsByTagName('tbody');//获取tbody元素
var trs = tbody[0].getElementsByTagName('tr');//获取tbody中的行，得到伪数组
console.log(trs);//打印看看输出的内容
for (var i = 0; i < trs.length; i++) {//对获取到的伪数组进行遍历
    if (i % 2 == 0) {//如果对2取余为0，则索引表示是偶数。0、2、4..
        trs[i].style.backgroundColor = '#f00';//添加上背景红色
    }
}

二、鼠标经过、离开变色

代码如下（示例）：

var tbody = document.getElementsByTagName('tbody');
var trs = tbody[0].getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
    trs[i].onmouseover = function() {
        this.bgColor = 'pink';
    }
    trs[i].onmouseleave = function() {
        this.bgColor = '';
    }
}

或者

var tbody = document.getElementsByTagName('tbody');
var trs = tbody[0].getElementsByTagName('tr');
 for (var i = 0; i < trs.length; i++) {
     trs[i].onmouseover = function() {
         this.style.backgroundColor = 'pink';
     }
     trs[i].onmouseleave = function() {
         this.style.backgroundColor = '';
     }
 }

三、鼠标点击某行变色，再点就取消颜色

代码如下（示例）：

var trs = document.querySelector('tbody').querySelectorAll('tr');
for (var i = 0; i < trs.length; i++) {
     trs[i].onclick = function() {
         if (this.bgColor == '') {
             this.bgColor = 'pink';
         } else {
             this.bgColor = '';
         }
     }
 }

四、点击单选变色

代码如下（示例）：

var tbody = document.getElementsByTagName('tbody');
var trs = tbody[0].getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
    trs[i].onclick = function() {
        for (var j = 0; j < trs.length; j++) {
            trs[j].bgColor = '';
        }
        this.bgColor = 'red';
    };
}

总结

没事多进行打印输出看效果。