用JavaScript改变table的背景色

最新推荐文章于 2025-03-20 10:24:04 发布

原创最新推荐文章于 2025-03-20 10:24:04 发布 · 5.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

HTML

CSS

本文介绍了如何使用JavaScript根据需求动态地改变HTML表格的背景颜色，通过实例代码演示了具体的实现过程，帮助读者掌握这一技巧。


index.html：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="styles/format.css"/>
</head>
<body>
    <table>
        <caption>Itinerary</caption>
        <thead>
            <tr>
                <th>When</th>
                <th>Where</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>June 9th</td>
                <td>Poratland,<abbr title="Oregon">OR</abbr></td>
            </tr>
            <tr>
                <td>June 10th</td>
                <td>Poratland,<abbr title="Oregon">OR</abbr></td>
            </tr>
            <tr>
                <td>June 11th</td>
                <td>Poratland,<abbr title="Oregon">OR</abbr></td>
            </tr>
        </tbody>
    </table>
    <script src="JS/add.js"></script>
</body>
</html>

format.css：

body{
    background-color: #fff;
    color: #000;
}

table{
    margin:auto;
    border:1px solid #699;
}

caption{
    margin:auto;
    padding: .2em;
    font-size: 1.2em;
    font-weight: bold;
}

th{
    font-weight: normal;
    font-style: italic;
    text-align: left;
    border:1px dotted #699;
    background-color: #9cc;
    color: #000;
}

th,td{
    width:10em;
    padding: .5em;
    text-align: center;
}

add.js：

function addLoadEvent(func){
    var oldonload = window.onload;
    if (typeof window.onload != 'function'){
        window.onload = func;
    }else {
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

function stripeTables(){
    if (!document.getElementsByTagName) return false;
    var tables = document.getElementsByTagName("table");
    var odd,rows;
    for(var i=0; i<tables.length; i++){
        odd = false;
        rows = tables[i].getElementsByTagName("tr");
        for(var j=0; j<rows.length; j++){
            if (odd == true){
                rows[j].style.backgroundColor = "#ffc";
                odd = false;
            }else {
                odd = true;
            }
        }
    }
}

addLoadEvent(stripeTables);