css实现表格隔行颜色不一样的效果
怎样css实现表格隔行颜色不一样的效果，表格中数据是变得，行数不一定
[解决办法]
如果行高度固定，可以用背景图片实现。
[解决办法]
如果真的很实现这种效果,用JS可以实现,不过最简单的办法,你在生成表格的时候用 mod 2来判断是否是复数行,来设置背景色或设置class
[解决办法]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME= "Generator " CONTENT= "EditPlus ">
<META NAME= "Author " CONTENT= " ">
<META NAME= "Keywords " CONTENT= " ">
<META NAME= "Description " CONTENT= " ">
<style>
.mytb {
width:300px;
height:20px;
border-bottom: 1px #f00 solid;
}
.mytb th {
background-color: #ff9d7f;
border: 1px #ff9d7f solid;
border-bottom: 1px #f00 solid;
}
.mytb td {
text-align: center;
background-color:expression((this.parentElement.sectionRowIndex%2==0)? '#efffa7 ': '#fff ');
}
</style>
</HEAD>
<BODY>
<table class= "mytb " cellspacing= "0 " cellpadding= "0 ">
<tr> <th> 000 </th> <th> 000 </th> <th> 000 </th> </tr>
<tr> <td> 000 </td> <td> 000 </td> <td> 000 </td> </tr>
<tr> <td> 000 </td> <td> 000 </td> <td> 000 </td> </tr>
<tr> <td> 000 </td> <td> 000 </td> <td> 000 </td> </tr>
<tr> <td> 000 </td> <td> 000 </td> <td> 000 </td> </tr>
</table>
</BODY>
</HTML>
[解决办法]
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.mytb tr.c1 {
background-color: #ff9d7f;
}
.mytb tr.c2 {
background-color: #EEEEEE;
}
</style>
</HEAD>
<BODY>
<table class= "mytb " cellspacing= "0 " cellpadding= "0 ">
<tr class= "c1 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
<tr class= "c2 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
<tr class= "c1 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
<tr class= "c2 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
<tr class= "c1 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
<tr class= "c2 "> <td> gdsgdsgdsgdsgsdgdsg </td> </tr>
</table>
</BODY>
</HTML>
[解决办法]
<style>
tr.tr_1 {
background-color: #ff9d7f;
}
tr.tr_2{
background-color: #EEEEEE;
}
</style>
<script>
function initTableCss(){
var tab=document.getElementById( "tab ");
for(var i=0;i <tab.rows.length;i++){
tab.rows[i].className=(i%2==1)? "tr_1 ": "tr_2 ";
}
}
window.onload=initTableCss;
</script>
<table id= "tab " />
<tr> <td> 111 </td> <td> 222 </td> </tr>
<tr> <td> 111 </td> <td> 222 </td> </tr>
<tr> <td> 111 </td> <td> 222 </td> </tr>
<tr> <td> 111 </td> <td> 222 </td> </tr>
<tr> <td> 111 </td> <td> 222 </td> </tr>
<tr> <td> 111 </td> <td> 222 </td> </tr>
<table>
[解决办法]
更简洁的做法
<script>
//函数的三个参数分别是table的id,单行颜色,双行颜色
function setTrBgColor(tableid,color1,color2){
var tab=document.getElementById(tableid);
for(var i=0;i <tab.rows.length;i++){
tab.rows[i].style.backgroundColor=(i%2==0)?color1:color2;
}
}
//示例:
window.onload=function(){
setTrBgColor( "tab ", "#123456 ", "#654321 ");
}
</script>
<table id= "tab " />
<tr> <td> 111 </td> <td> 222 </td> </tr>
<tr> <td> 111 </td> <td> 222 </td> </tr>
<tr> <td> 111 </td> <td> 222 </td> </tr>
<tr> <td> 111 </td> <td> 222 </td> </tr>
<tr> <td> 111 </td> <td> 222 </td> </tr>
<tr> <td> 111 </td> <td> 222 </td> </tr>
<table>
[解决办法]
TABLE TR {
background-color:expression((this.sectionRowIndex%2==0)? "#FFFFFF ": "#F0F0F0 ");
}
