(转)用JS实现表格中隔行显示不同颜色

用JS实现表格中隔行显示不同颜色

第一种:
<style>
tr{bgColor:expression(
    this.bgColor=((this.rowIndex)%2==0 )? 'white' : 'yellow');
}
</style>
<table id="oTable" width="100" border="1" style="border-collapse:collapse;">
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>

第二种:
<script language="javascript">
     var oTable = document.all['oTable'];
     for(var i=0;i<oTable.rows.length;i ){
          oTable.rows[i].bgColor = (i%2==0) ? 'white' : 'yellow' ;
     }
</script>
<table id="oTable" width="100" border="1" style="border-collapse:collapse;">
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>

第三种(第二种的改进版):
用布儿变量替代之:内存换时间
var isToggled = false;

var oTable = document.all['oTable'];
for(var i=0;i<oTable.rows.length;i ){
    isToggled = ! isToggled;
    oTable.rows[i].bgColor = isToggled ? "white" : "yellow" ;         
}


鼠标经过时改变背景颜色
<table><tr><td width="100" height="100" οnmοuseοver="style.backgroundColor='#C86F70'" οnmοuseοut="style.backgroundColor='#DDC676'" bgcolor="#DDC676">ihandu</td></tr></table>


我的方法一:
<!--<script language="javascript">
    window.onload = function(){   //表格隔行显示不同颜色
      var tab = document.getElementById('tab');
      for(var i=0;i<tab.rows.length;i ){
          tab.rows[i].bgColor = (i%2==0) ? 'white' : '#e6e6e6' ;
     }
    }
</script>
  -->


我的方法二:
<tr height = "22px" align=center style="c:if test='${status.count%2==0}'>#FFFFFF</c:if><c:if test='${status.count%2!=0}'>#E6E6E6</c:if>" > 

 

附:

<script src="jquery-1.7.min.js"></script>
<script>
$(document).ready(function(){
SetTableRowColor();

});
//用CSS控制奇偶行的颜色
function SetTableRowColor()
{

$("#Table tr:odd").css("background-color", "#e6e6fa");
$("#Table tr:even").css("background-color", "#fff0fa");
}
</scirpt> 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369591.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 系列之spring学习--spring搭建(一)

一、新建maven项目 二、引入spring jar包 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0…

php简单分页,php简单实现分页查询的方法

这篇文章主要为大家详细介绍了php简单实现分页查询的方法&#xff0c;具有一定的参考价值&#xff0c;感兴趣的小伙伴们可以参考一下关于php,最近学了好多&#xff0c;老师跟我们说&#xff0c;现在学的都是php的核心部分&#xff0c;所以我比较注意了一下&#xff0c;也多练习…

Java Collections API怪癖

因此&#xff0c;当涉及到Java Collections API时&#xff0c;我们倾向于认为已经了解了所有内容。 我们知道我们的身边方式列表 &#xff0c; 设置 &#xff0c; 地图 &#xff0c; Iterables &#xff0c; 迭代器 。 我们已经为Java 8的Collections API增强做好了准备。 但是…

笔记 — 动画效果(Css3)

/*** animation-name: 调用 keyframes 所定义的动画* animation-duration: 动画周期所花费的时间长度* animation-timing-function: 规定动画的速度曲线* animation-delay: 延时执行动画的时间* animation-iteration-count: 动画执行的次数* animation-dircetion: 规定动画下一…

可命名元组namedtuple

import collectionsMytupleClass collections.namedtuple(MytupleClass,[x,y,z])objMytupleClass(11,22,33)print(obj.x)print(obj.y)print(obj.z)print(dir(obj))print(help(obj))转载于:https://www.cnblogs.com/POP-w/p/7412278.html

django用户认证系统——登录4

用户已经能够在我们的网站注册了&#xff0c;注册就是为了登录&#xff0c;接下来我们为用户提供登录功能。和注册不同的是&#xff0c;Django 已经为我们写好了登录功能的全部代码&#xff0c;我们不必像之前处理注册流程那样费劲了。只需几分钟的简单配置&#xff0c;就可为用…

php缓存类,PHP缓存类

// ----------------------------------------------------------------------// |缓存类// ----------------------------------------------------------------------// | Author: justmepzy(justmepzygmail.com)// -------------------------------------------------------…

双向@OneToMany / @ManyToOne关联

编程的目标之一是代表现实世界中的模型。 通常&#xff0c;应用程序需要对实体之间的某些关系进行建模。 在上一篇有关Hibernate关联的文章中&#xff0c;我描述了建立“一对一”关系的规则。 今天&#xff0c;我将向您展示如何设置双向的“ 一对多 ”和“ 多对一 ”关联。 这个…

web前端黑客技术揭秘 6.漏洞挖掘

6.1  普通XSS漏洞自动化挖掘思路 6.1.1  URL上的玄机 6.1.2  HTML中的玄机 2.HTML标签之内 6.1.3  请求中的玄机 6.1.4  关于存储型XSS挖掘 6.2.1  HTML与JavaScript自解码机制 <input type"button" id"exec_btn" value"exec" on…

Webpack基础使用

目录 一.什么是Webpack 二.为什么要使用Webpack 三.Webpack的使用 1.下载yarn包管理器 2.Webpack的安装 3.Webpack的简单使用 4.效果 四.Webpack打包流程 一.什么是Webpack Webpack是一个静态模块打包工具 二.为什么要使用Webpack 在开发中&#xff0c;我们常常会遇到…

CSS3及JS媒体查询教程

CSS3媒体查询&#xff1a; 语法&#xff1a; <media_query_list>&#xff1a;<media_query>[,<media_query>] <media_query>&#xff1a;only|not <mediaType> and <expression>[ and <expression>] <expression>&#xff1a;…

php mongodb

// 欄位字串為$querys array("name">"shian");// 數值等於多少$querys array("number">7);// 數值大於多少$querys array("number">array($gt > 5));// 數值大於等於多少$querys array("number">array($…

阿帕奇骆驼遇见Redis

键值商店的兰博基尼 Camel是最好的面包集成框架&#xff0c;在本文中&#xff0c;我将向您展示如何通过利用另一个出色的项目Redis使它更加强大。 Camel 2.11即将发布&#xff0c;具有许多新功能&#xff0c;错误修复和组件。 这些新组件中的几个是我创作的&#xff0c; red…

php 数字加逗号,php数字满三位添加一逗号

//数字满三位添加一逗号&#xff1a;$s_money1 1000000;$s_money2 number_format($s_money1);echo $s_money1;//1000000echo "";echo $s_money2;//1,000,000PHP number_format() 函数number_format() 函数通过千位分组来格式化数字。注释&#xff1a;该函数支持一个…

HTML 教程- (HTML5 标准)摘抄笔记

HTML 教程- (HTML5 标准) 教程网址&#xff1a;http://www.runoob.com/html/html-tutorial.html http://blog.csdn.net/ljfbest/article/details/6700148 HTML版本 从初期的网络诞生后&#xff0c;已经出现了许多HTML版本: 版本发布时间HTML1991HTML 1993HTML 2.01995HTML 3…

spring 隔离级别 测试代码

Controller RequestMapping("/test") Api(value "测试", description "测试") public class TestController {Autowiredprivate TestService testService;RequestMapping(value "listForDirtyRead", method RequestMethod.GET)Res…

他人的一些2017年度总结

闭环思维&#xff1a;自己在做工作的时候&#xff0c;以及在做事情的时候&#xff0c;逐渐养成了闭环思考模式。一个新的东西&#xff0c;一个新的方案&#xff0c;从场景开始梳理&#xff0c;一步步的梳理流程和方案&#xff0c;然后到最终的方案落地&#xff0c;所有的一套流…

Java EE CDI ConversationScoped示例

在本教程中&#xff0c;我们将向您展示如何在Web应用程序中创建和使用ConversationScoped Bean。 在CDI中&#xff0c;bean是定义应用程序状态和/或逻辑的上下文对象的源。 如果容器可以根据CDI规范中定义的生命周期上下文模型来管理其实例的生命周期&#xff0c;则Java EE组件…

block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素

block:块级元素默认display属性为block&#xff1b;无论块内内容有多少&#xff0c;总是占满一行&#xff1b; inline:行内元素默认display属性为inline&#xff1b;只占据块内的内容的大小&#xff0c;不会占满一整行&#xff1b; inline-block:将行内元素的display属性改为…

mybatis深入理解之 # 与 $ 区别以及 sql 预编译

mybatis 中使用 sqlMap 进行 sql 查询时&#xff0c;经常需要动态传递参数&#xff0c;例如我们需要根据用户的姓名来筛选用户时&#xff0c;sql 如下&#xff1a; select * from user where name "ruhua"; 上述 sql 中&#xff0c;我们希望 name 后的参数 "ru…