直接上代码:

 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb3212">
<title>单双行显示不同颜色</title>
<script type="text/javascript">
window.onload = function color(){
var table = document.getElementById("person");
var rows = table.getElementsByTagName("tr");
for(var i=0;i<rows.length;i++){
if (i%2==0){
rows[i].style.backgroundColor = "#EAF2D3"
}else{
rows[i].style.backgroundColor = "White";
}
}
}
</script>
<style type = "text/css">
#person
{
border-style:1px solid;
border-color:blue;
font-weight:bold;
font-family:楷体,Arial,Helvetica, sans-serif;
border-collapse:collapse;
margin:auto;
}
#person th
{
border:1px solid;
padding:3px 7px 2px 7px
background-color:#A7C942
color:#ffffff
text-align:center;
}
#person td
{
border-style:solid;
border-width:1px;
text-align:center;
}
</style>
</head>
<body>
<table id="person" align="center" width = "90%" height="200">
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
<th>爱好</th>
</tr>
<tr>
<td>zhangsan</td>
<td>male</td>
<td>123456</td>
<td>swimming</td>
</tr>
<tr>
<td>zhangsan</td>
<td>male</td>
<td>123456</td>
<td>swimming</td>
</tr>
<tr>
<td>zhangsan</td>
<td>male</td>
<td>123456</td>
<td>swimming</td>
</tr>
</table>
</body>
</html>

html table单双行颜色间隔(转载)的更多相关文章

  1. js改变,设置table单双行颜色,jquery改变,设置table单双行颜色

    1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...

  2. table 控制单双行颜色以及鼠标hover颜色 table光棒

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. repeater单双行颜色不同,gridview repeater DataList 鼠标经过改变背景颜色

    1.gridview 双击GridView的OnRowDataBound事件: 在后台的GridView1_RowDataBound()方法添加代码,最后代码如下所示: protected void  ...

  4. Js实现table单双行交替色

    依稀记得,当初我刚学编程的时候还学过怎么实现表格单双行交替色,现如今早已记不清当时的实现思路,这两天突然想起,没事就自己写了一小段代码,也不知道是否是当年的思路,不过不用纠结这个问题.:) 代码很简单 ...

  5. 奇偶选择器:使用odd和even属性实现表格单双行颜色相间和不同

    一.奇偶选择器 表格在呈现数据的时候我们为了方便观看,而隔行显示不同的颜色,虽然可以用用类选择器 class实现这种效果,但是未免太过麻烦,为了更加简便地表现这种特殊的效果我们需要用到一种特殊的选择器 ...

  6. js控制表格单双行颜色交替显示

    <script language="JavaScript"> window.onload = function() { var Table=document.getEl ...

  7. JS实战 &#183; 表格行颜色间隔显示,并在鼠标指定行上高亮显示

    思路: 1.获取所有行对象,将需要间隔颜色显示的行对象进行动态的className属性指定:      前提是:先定义好类选择器,就是说给行对象赋予name. 2.高亮用到两个事件:onmouseov ...

  8. css单双行样式

    #random_box li:nth-child(odd) {//双行 background: #fff5c4; } #random_box li:nth-child(even) {//单行 back ...

  9. PB中datewindow单双行显示不同颜色

    调出datewindow,找到detail中的列,右击properties,左侧Background中的color属性添加 IF(MOD(GETROW(),2)=0,RGB( 255, 250, 20 ...

随机推荐

  1. Maven打包生成可运行bat/sh脚本文件

    利用Maven的appassembler-maven-plugin插件,就可以实现自动打包可运行的脚本,还可以跨平台.   <plugin>      <groupId>org ...

  2. Android环境虚拟WINDOWS系统

    参考文档:http://bbs.anzhi.com/thread-5120526-1-1.html 我们知道安卓手机是arm平台,windows是x86平台,指令集完全不同,但在这里要教给大家的是靠软 ...

  3. NSOJ10050 Newspaper Headline

    题意:给你一个<10^4的S串和<10^6的T串,通过将S串重复k次,然后将其中一些多余的字母删掉可以获得T串,问k最小是多少,没有的话输出1. 思路:对于每个T串里的字母,我们从左到右扫 ...

  4. 序列化(ObjectOutputStream和ObjectInputStream)(切记:out是输出到本地中,in是输入到程序中)

    注意:序列化自定义类必须实现一个接口Serializable,在c#中序列化自定义类是使用特性也就是[Serializable] //要实现序列化的类 public class Student imp ...

  5. 1077. [NOIP2010冲刺六] 数列游戏

    [题目描述] 小M很喜欢找点游戏自娱自乐.有一天,她在纸上写了一串数字:1,1,2,5,4.接着她擦掉了一个1,结果发现剩下1,2,4都在自己所在的位置上,即1在第1位,2在第2位,4在第4位.她希望 ...

  6. year 和 weak year 的区别

    java 中使用 SimpleDateFormat 时,会遇到 year 和 week year 这两个概念,特此记录. google 答案: A week year is in sync with ...

  7. ppt制作动态表格与文字

          在工作中经常与ppt打交道的小伙伴们,是不是非常想让自己做的ppt图表能够动起来,显得高大上一点呢?比如让柱形图慢慢长起来,让折线图慢慢画出来,让文字像字幕一样缓缓上升?本文将给大家整理几 ...

  8. JavaScript 高级程序设计第二版

    20.4 部署 20.4.1 构建 构建过程始于在源控制中定义用于存储文件的逻辑结构.最好避免使用一个文件存放所有的JavaScript,遵循以下面向对象语言中的典型模式:将每个对象或自定义了类别分别 ...

  9. CSS 基础:定位元素(3)&lt;思维导图&gt;

    这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...

  10. python五十八课——正则表达式(切割)

    切割:split(regex,string):返回一个列表对象 import re str1='i love shenzhen so much' regex=r' +?' lt=re.split(re ...