当前位置: 代码迷 >> HTML/CSS >> Js_CSS兑现多色表格
  详细解决方案

Js_CSS兑现多色表格

热度:14   发布时间:2012-11-09 10:18:47.0
Js_CSS实现多色表格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style rel="stylesheet" type="text/css">
.bg1 {
BACKGROUND: plum 0% 50%
}
.bg2 {
BACKGROUND: thistle 0% 50%
}
.bg3 {
BACKGROUND: aquamarine 0% 50%
}
</style>

<script>
//指定各行css样式
function changeRowCss(){
var table = document.getElementById("testRowsColor");
var rowclass=table.getAttribute("rowclass");
if(rowclass){
var bgCssArr=rowclass.split(",");//背景色的Css名称数组
if(bgCssArr.length>0){
rows = table.rows;
for (var j=0; j<rows.length; j++) {
   var sn=j % (bgCssArr.length);
   rows[j].className=bgCssArr[sn];
}
}
}
}
</script>
</HEAD>

<BODY>
  <table id="testRowsColor"  rowclass=",bg1,bg2,bg3" width="200px" >
<tr>呵呵</tr>
<tr>呵呵</tr>
<tr>呵呵</tr>
<tr>呵呵</tr>
<tr>呵呵</tr>
<tr>呵呵</tr>
<tr>呵呵</tr>
<tr>呵呵</tr>
<tr>呵呵</tr>
<tr>呵呵</tr>
<tr>呵呵</tr>
<tr>呵呵</tr>
<tr>呵呵</tr>
<tr>呵呵</tr>
<tr>呵呵</tr>


  </table>
</BODY>
<script>changeRowCss();</script>
</HTML>
  相关解决方案