1. 爱易网页
  2. HTML教程
  3. Js_CSS兑现多色表格

Js_CSS兑现多色表格

日期：2014-05-17　 浏览次数：20793 次

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>

相关资料更多>

  1. CSS技术在网页设计中的运用
  2. 浏览器html5/css3兼容性检测的javascript类库 - Modernizr简略介绍
  3. chrome上,img标签的图片显示不出来
  4. 请教新版腾讯网右边那个“大家爱看”是如何做的
  5. IE6，IE7，IE8支持CSS3成效
  6. XSLT兑现XML文档转换成HTML文档
  7. 求解一道关于HTML标签使用的有关问题，多谢
  8. WEB规范建站-XHTML基础教程２
  9. 运用Spring计时器和velocity模板定时生成静态html/jsp文件