<!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. php连接mysql数据库练手

    <?php $servername = "localhost"; $username = "yosha"; $password = "leon0 ...

  2. 云之讯融合通讯开放平台_提供融合语音，短信，VoIP，视频和IM等通讯API及SDK。

    云之讯融合通讯开放平台_提供融合语音,短信,VoIP,视频和IM等通讯API及SDK. undefined 全明星之极验证 - SendCloud undefined [转载]国内外几个主流的在线开发 ...

  3. Guava库

    Guava是一个非常棒的库,它就是Java标准库"所缺失的那部分",是一个 Google 的基于java1.6的类库集合的扩展项目,包括 collections, caching, ...

  4. java+springboot+bootstrap-fileInput 文件上传前后台完整示例

    先看效果图

  5. 服装销售系统数据库课程设计（MVC）

    <数据库课程设计> 名称:Jia服装销售网站 姓名:陈文哲 学号:…… 班级:11软件工程 指导老师:索剑 目录 目录 1 需求分析 3 一:销售部门机构情况 3 二:销售部门的业务活动情 ...

  6. HTML里面Textarea换行总结

    近期碰到一个数据转来转去转到Textrea里面能否真正按行存放的问题,在这里总结一下:   问题描写叙述: 比方get数据到一个TextArea里面,如“AAA BBB”,想把这段文字在TextAre ...

  7. InstallShield12豪华版破解版下载|InstallShield下载|软件打包工具

    InstallShield 12 豪华版+破解版 下载 下载速度:220kb/s InstallShield 12为软件发行方提供率先的安装程序解决方式,可以制作强大可靠的Windows Instal ...

  8. IE无法打开internet网站已终止操作的解决的方法

    用IE内核浏览器的朋友,或许不经意间会碰到这样滴问题: 打开某个网页时,浏览器“嘣”跳出一个提示框“Internet Explorer无法打开Internet 站点...已终止操作”.而大多数情况下该 ...

  9. 深入理解iframe

    本文并不是一篇iframe API文档讲解,因此想了解iframe API的同学请移步 MDN, 我将在现在浏览器的角度与大家取探讨iframe, 因此,本文中虽然会提及一些iframe在旧浏览器中的 ...

  10. MySQL查询

    DQL 操作 DQL 数据查询语言(重要)     数据库执行DQL语句不会对数据做出任何改变,而是让数据库发送结果集给客户端.  查询返回的结果是一张虚拟表.   查询关键字:SELECT     ...