JavaScript中的表格颜色控制

最新推荐文章于 2022-09-07 18:35:18 发布

小POooo

最新推荐文章于 2022-09-07 18:35:18 发布

阅读量2.6k

点赞数

文章标签：随笔 javaScript

本文链接：https://blog.csdn.net/ITxiaobaibai/article/details/81096282

版权

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="first.aspx.cs" Inherits="first" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <table id="tb1" border="1px solid red"  width="500px" height="50px" align="center" >
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>显示器</td>
            </tr>
            <tr>
                <td>2</td>
                <td>鼠标</td>
            </tr>
            <tr>
                <td>3</td>
                <td>键盘</td>
            </tr>
            <tr>
                <td>4</td>
                <td>鼠标垫</td>
            </tr>
            <tr>
                <td>5</td>
                <td>视屏线</td>
            </tr>
            <tr>
                <td>6</td>
                <td>电脑桌</td>
            </tr>

        </tbody>
    </table>
    </form>
    <script>window.onload = function () {
    var table1 = document.getElementById("tb1");
    var len = table1.tBodies[0].rows.length;
    for (i = 0; i < len; i++) {
        if (i % 2 == 0) {
            table1.tBodies[0].rows[i].style.backgroundColor = "silver";
        } else {
            table1.tBodies[0].rows[i].style.backgroundColor = "yellow";
        }
    }
}       
    </script>
</body>
</html>

1.显示创建表格，创建后的表格中填入数据，再页面加载的时候，将其行数位偶数的行的颜色与行数位奇数的行数分开显示

效果如下：

2.鼠标放到某一行上边的时候，行的颜色发生变化，移开是回复原状

小POooo

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的表格颜色控制

&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="first.aspx.cs" Inherits="first" %&gt;&lt;!DOCTYPE html&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;he
复制链接

扫一扫