用CSS样式实现表的行显示不同颜色背景

我现在要编写一个代码，直接调用CSS样式名为table的样式就可以把整个表实现一行为红色背景，一行为蓝色背景的效果，第一行不变，有谁会，帮帮忙... 我现在要编写一个代码，直接调用CSS样式名为table的样式就可以把整个表实现一行为红色背景，一行为蓝色背景的效果，第一行不变，有谁会，帮帮忙展开

 我来答

4个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

书香学编程
2020-12-18 · 贡献了超过775个回答

知道答主

回答量：775

采纳率：25%

帮助的人：53万

我也去答题访问个人页

关注

展开全部

Vue实践-CSS样式position/display/float属性对比使用

已赞过 已踩过<

评论收起

北京百度网讯科技有限公司

广告2024-10-20

专注人像摄影AI创作平台，天使宝宝，浪漫花海，大梦敦煌，冰雪公主，小小士兵，魔法少年，多种写真邀您体验，注册即享免费生成，立即尝鲜!用AI技术定制你的专属魅力。

photo.baidu.com

牢蕙0gH
推荐于2016-06-26 · TA获得超过810个赞

知道小有建树答主

回答量：1743

采纳率：0%

帮助的人：641万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格隔行换色</title>
<style type="text/css" media="screen">
<!-- /* PR-CSS */
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}
tr.t1 td {background-color:#fff;}/* 第一行的背景色 */
tr.t2 td {background-color:#eee;}/* 第二行的背景色 */
tr.t3 td {background-color:#ccc;}/* 鼠标经过时的背景色 */
-->
</style>
</head>
<body>
<table id="tab">
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
</table>
<script type="text/javascript">
<!--
var Ptr=document.getElementById("tab").getElementsByTagName("tr");
function $() {
    for (i=1;i<Ptr.length+1;i++) { 
    Ptr[i-1].className = (i%2>0)?"t1":"t2"; 
    }
}
window.onload=$;
for(var i=0;i<Ptr.length;i++) {
    Ptr[i].onmouseover=function(){
    this.tmpClass=this.className;
    this.className = "t3";    
    };
    Ptr[i].onmouseout=function(){
    this.className=this.tmpClass;
    };
}
//-->
</script>
</body>
</html> 

自己粘贴下去研究一下吧。


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

柒月摩天輪
2009-10-13 · TA获得超过279个赞

知道小有建树答主

回答量：426

采纳率：66%

帮助的人：198万

我也去答题访问个人页

关注

展开全部

不用行调用不同的class
.tdRed{
background-color:red}
.tdBlue{
background-color:blue}

<table>
<tr>
<td class="tdRed"></td>
<td class="tdBlue"></td>
</tr>
</table>

然后后台程序员自己写代码循环输出