首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

Js_CSS兑现多色表格

2012-11-09 
Js_CSS实现多色表格!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//ENHTMLHEADTITLE

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"  rowwidth="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>

热点排行