html and js 的隔行换背景色表格实例详解

效果：

码码：

<!DOCTYPE html>
<html>
<head>
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.altrowstable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #a9c6c9;border-collapse: collapse;
}
table.altrowstable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;
}
table.altrowstable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;
}
.oddrowcolor{background-color:#d4e3e5;
}
.evenrowcolor{background-color:#c3dde0;
}
</style><!-- Javascript goes in the document HEAD -->
<script type="text/javascript">
function altRows(id){if(document.getElementsByTagName){  var table = document.getElementById(id);  var rows = table.getElementsByTagName("tr"); for(i = 0; i < rows.length; i++){          if(i % 2 == 0){rows[i].className = "evenrowcolor";}else{rows[i].className = "oddrowcolor";}      }}
}window.οnlοad=function(){altRows('alternatecolor');
}
</script>
</head><body><!-- Table goes in the document BODY -->
<table class="altrowstable" id="alternatecolor">
<tr><th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr><td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr><td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</tr>
<tr><td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr><td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr><td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table><!--  The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 --></body>
</html>

代码解释：

在两个css样式 oddrowcolor，evenrowcolor中定义不同的背景色；

在js函数中获取行的集合；
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");

第一句根据id获取table，第二句获取所有行(tr)的集合；
getElementById和getElementsByTagName的区别是：前者根据id返回单个对象；后者根据标签返回对象，具有相同标签的对象都会被返回；

在for循环中访问每一行，奇数行赋予css类oddrowcolor, evenrowcolor；赋予了不同的css类之后其背景色就变了。

html and js 的隔行换背景色表格实例详解相关推荐

ListView数据项隔行换色控制实现详解
看到有朋友在群里问过ListView项达到一定数量时加不同色选项的功能,有时间就学习了下ListView隔行换色的效果,大体效果实现出来了,吼吼,写博客里面,跟大家学习交流,一样的,先贴效果,再上代码 ...
java表格的创建_Java创建表格实例详解原创
表格是最常用的数据统计形式之一,在 swing 中由 JTable 类实现表格.接下来,我们看看怎么利用 JTable 创建表格. 在 JTable 类中除了默认的构造方法外,还提供了利用指定表格列 ...
java 表格_Java创建表格实例详解
表格是最常用的数据统计形式之一,在 swing 中由 JTable 类实现表格.接下来,我们看看怎么利用 JTable 创建表格. 在 JTable 类中除了默认的构造方法外,还提供了利用指定表格列 ...
如何在js代码中消灭for循环实例详解
转载自:https://www.jb51.net/article/144662.htm 补充一:看来很多人没看完文章就评论了.我在文章末尾说了,是不写 for 循环,不是不用 for 循环.简单陈述不 ...
bootstrap表格遍历_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
bootstrap 获取表格修改的结果_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
python二维元组_python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
如何去读取一个没有表头的二维csv文件(如下图所示)? 并以元组的形式表现数据: ((1.0, 0.0, 3.0, 180.0), (2.0, 0.0, 2.0, 180.0), (3.0, 0.0, ...
vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解一.总结一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

html and js 的隔行换背景色表格实例详解

html and js 的隔行换背景色表格实例详解相关推荐

最新文章

热门文章