<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function()

{

var tbl = document.getElementById("tbl");

rows = tbl.getElementsByTagName("tr");

for(i=0;i<rows.length;i++)

{
var j = parseInt(i/3);

if(j%2==0) rows[i].style.backgroundColor="#f00";

else rows[i].style.backgroundColor="#0f0";

}

}
</script>
</head>

<body>

<table id="tbl">

<tr><td>1</td></tr>

<tr><td>2</td></tr>

<tr><td>3</td></tr>

<tr><td>4</td></tr>

<tr><td>5</td></tr>

<tr><td>6</td></tr>

<tr><td>7</td></tr>

<tr><td>8</td></tr>

<tr><td>9</td></tr>

<tr><td>10</td></tr>

</table>

</body>
</html>

js隔行变色的更多相关文章

  1. JS 隔行变色

    <script type="text/javascript">       window.onload=function(){             var oUl= ...

  2. 简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  3. [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件

    隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素 和 表格类型 ) 2,一个页面 ...

  4. 隔行变色---简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  5. 使用webpack打包js文件(隔行变色案例)

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  6. HTML系列：js和css多种方式实现隔行变色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JS实现表格隔行变色

    用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(th ...

  8. JS实现隔行变色，鼠标移入高亮

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  9. 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

随机推荐

  1. [ZETCODE]wxWidgets教程六：事件处理

    本教程原文链接:http://zetcode.com/gui/wxwidgets/events/ 翻译:瓶哥 日期:2013年12月7号星期六 邮箱:414236069@qq.com 主页:http: ...

  2. php-mysql结果集函数比较

    本节主要介绍了获取查询结果集的4个函数,此处对它们进行综合比较.     ● mysql_result():优点在于使用方便:而缺点在于功能少,一次调用只能获取结果数据集中的一行记录,对较大型的数据库 ...

  3. SpringMVC接收页面表单参数(转)

    作者:CN.programmer.Luxh 和java相关 一个普通的表单. 表单的代码如下: <%@ page language="java" contentType=&q ...

  4. .jar是什么文件？(转载)

    JAR(Java ARchive,Java 归档)是一种与平台无关的文件格式,可将多个文件合成一个文件.用户可将多个 Java applet 及其所需组件(.class 文件.图像和声音)绑定到 JA ...

  5. 安装MYSQL 出现Error 1045 access denied 的解决方法

    操作系统:WINDOWS10 系统 数据库版本:mysql 5.x 提示:access denied for user 'root'@'localhost' using password yes/no ...

  6. mysql日志设置

    mysql有一个功能就是可以log下来运行的比较慢的sql语句,默认是没有这个log的,为了开启这个功能,要修改my.cnf或者在mysql启动的时候加入一些参数.如果在my.cnf里面修改,需增加如 ...

  7. Block使用变量,让你的程序看起来清晰!

    <span style="font-size:24px;">为什么要使用block变量呢? 由于当我们的程序比較繁杂的时候,我们在一个函数中要调用一个函数,还须要在外边 ...

  8. JQuery和UpdatePannel的问题

    转: http://www.cnblogs.com/Tim_Liu/archive/2010/11/25/1887937.html 最近在做一个项目,因为涉及到的字段数量很多所以想偷把懒,便使用了Up ...

  9. PrintWriter的print和write方法(转)

    public void print(String s) {if (s == null) {s = "null";}write(s);  }  print只是先对s==null转换为 ...

  10. Android菜单详解（四）——使用上下文菜单ContextMenu

    之前在<Android菜单详解(二)——创建并响应选项菜单>和<Android菜单详解(三)——SubMenu和IconMenu>中详细讲解了选项菜单,子菜单和图标菜单.今天接 ...