js控制表格隔行变色

js控制表格隔行变色_第1张图片

doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js控制隔行变色title>
head>
<body>
    <table id="tb1" border="1" border-collapse="collapse" cellpadding="5" width="400" height="20" cellspacing="0" bordercolor="#99cccc">
        <thead>
            <tr>
                <td>编号td>
                <td>作品td>
                <td>时间td>
            tr>
        thead>
        <tbody id="tb2">
            <tr>
                <td>1td>
                <td>回忆三部曲td>
                <td>1995td>
            tr>
            <tr>
                <td>2td>
                <td>未麻的部屋td>
                <td>1997td>
            tr>
            <tr>
                <td>3td>
                <td>千年女优td>
                <td>2001td>
            tr>
            <tr>
                <td>4td>
                <td>妄想代理人td>
                <td>2004td>
            tr>
            <tr>
                <td>5td>
                <td>红辣椒td>
                <td>2006td>
            tr>
            <tr>
                <td>6td>
                <td>东京教父td>
                <td>2003td>
            tr>
        tbody>
    table>
 
    <script type="text/javascript">
     window.onload=function tablecolor(){
        var t_name = document.getElementById("tb2");
        var t_len = t_name.getElementsByTagName("tr");
        for(var i=0;i<=t_len.length;i++){
            //偶数行时执行
            if(i%2 == 0){
                t_len[i].style.backgroundColor="#ffcccc";
             //添加鼠标经过事件
                t_len[i].onmouseover = function(){
                    this.style.backgroundColor="#ccffff"
                }
                //添加鼠标离开事件
                t_len[i].onmouseout = function(){
                    this.style.backgroundColor="#ffcccc"                
                }
            }
            else{
                t_len[i].style.backgroundColor="#ffffcc";
 
                t_len[i].onmouseover = function(){
                    this.style.backgroundColor="#ccffff"
                }
                t_len[i].onmouseout = function(){
                    this.style.backgroundColor="#ffffcc"
            }
        }
     }
 }
    script>
body>
html>

 

转载于:https://www.cnblogs.com/yuer20180726/p/11150270.html

你可能感兴趣的:(js控制表格隔行变色)