`
ianylb
  • 浏览: 74411 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

Js_CSS实现多色表格

CSSJ#HTML 
阅读更多
<!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>
分享到：
| Div浮动的简单实现
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    echarts+vue实现多条统计柱状图表（渐变色柱状图，x、y坐标系修改颜色）项目源码.rar

    Vue.js是一个轻量级的前端JavaScript框架，它提供了组件化开发模式，使得构建用户界面更加简洁高效。在本项目中，Vue将用于创建各个图表组件，并管理数据和视图的双向绑定。 2. **ECharts**： ECharts是百度开发...

    大气扁平风格CSS3模板是一款黄色大气简洁风格的CSS3网站模板下载 .rar

    2. **边框与背景**：CSS3允许使用圆角边框（`border-radius`）、多色边框（`border-image`）、渐变背景（`linear-gradient`和`radial-gradient`）以及盒阴影（`box-shadow`），为网页元素增添了更多视觉效果。...

    html5+css3模板

    下载并解压此压缩包后，用户将获得一个包含HTML文件、CSS文件、JavaScript文件以及可能的图片和其他媒体资源的文件夹结构。通过编辑和定制这些文件，开发者可以适应特定项目需求，打造出个性化的后台管理系统。同时...

    面向新十年的功能丰富CSS框架https://shorthandcss.com-JavaScript开发

    速记速记是一个CSS框架，不包含任何javascript。 您只能通过使用.scss来自定义框架。 Size Dist File URL Lite Lite.shorthand.min.c速记速记是一个CSS框架，不包含任何javascript。 您只能通过使用.scss来自定义...

    js HTML5 Canvas线性图表.zip

    总之，"js HTML5 Canvas线性图表"是一款利用HTML5 Canvas API实现的，能呈现多色分段的线性图表的JavaScript插件。它强调了数据可视化的清晰度和有效性，适合在数据分析、报告展示等场景下使用。开发者可以通过掌握...

    22个经典HTML网站项目模板

    这些组件通过CSS和JavaScript库（如jQuery、Vue.js或React.js）实现交互效果。 4. **数据展示**：表格和卡片是数据展示的常见方式，模板会提供样式化的表格和卡片设计，有时还会集成数据排序、筛选和分页功能。 5....

    gentelella html框架

    1. **Bootstrap 3**：Gentelella是基于Bootstrap 3开发的，这意味着它利用了Bootstrap的强大功能，如网格系统、CSS样式、JavaScript插件等，以实现响应式设计和易用性。Bootstrap的预设组件和布局工具使开发者能够...

    网站设计与建设期末考试样题(未附答案).docx

    2. 常见的页面布局方法包括层叠样式表(CSS)布局、表格布局、流体布局和透明GIF定位。这些布局方法有助于实现不同屏幕尺寸下的响应式设计。 3. 服务器的RASUM衡量标准代表可靠性(Reliability)、可用性(Availability)...

Magicbox
Global site tag (gtag.js) - Google Analytics