javascript与jquery 控制表格行的字体与背景色

最新推荐文章于 2022-06-20 14:22:56 发布

最新推荐文章于 2022-06-20 14:22:56 发布 · 465 阅读

文章标签：

#JavaScript #jQuery #CSS #ViewUI

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用纯 JavaScript 和 jQuery 实现 HTML 表格中行的背景颜色和字体颜色交替变化，提升用户体验。通过简单的代码示例，展示了两种方法的具体实现过程。

<script type="text/javascript">
    window.onload=function(){
        var table=document.getElementById("tb");
        var tboby=table[0];
        var trs=document.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
            if(i%2==0){
                trs[i].style.color="#3333ff";  //设置偶数行字体的颜色
            }else{
                trs[i].style.background="#99ffff"; //设置奇数行的背景色
            }
        }
    };
</script>
</head>
<body>
<table id="tb">
    <tbody>
        <tr><td>第一行</td><td>第一行</td></tr>
        <tr><td>第二行</td><td>第二行</td></tr>
        <tr><td>第三行</td><td>第三行</td></tr>
        <tr><td>第四行</td><td>第四行</td></tr>
        <tr><td>第五行</td><td>第五行</td></tr>
        <tr><td>第六行</td><td>第六行</td></tr>
    </tbody>
</table>
</body>

注: 设置行的背景色也可以这样写 trs[i].style.backgroundColor ="#99ffff"; //设置偶数行的背景色

下面是jquery实现相同的功能

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		$("#tb tbody tr:even").css("color","#3333ff");
		$("#tb tbody tr:odd").css("background","#99ffff");
	});
</script>
</head>
<body>
<table id="tb">
<tbody>
<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
<tr><td>第三行</td><td>第三行</td></tr>
<tr><td>第四行</td><td>第四行</td></tr>
<tr><td>第五行</td><td>第五行</td></tr>
<tr><td>第六行</td><td>第六行</td></tr>
</tbody>
</table>
</body>

注: 这里当然也可以写 
$("#tb tbody tr:odd").css("backgroundColor","#99ffff");