用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"
onmouseover="style.backgroundColor=‘#C86F70‘"
onmouseout="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>" >

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

时间: 2024-11-03 20:48:51

用JS实现表格中隔行显示不同颜色的相关文章

js获取表格中的数据 以及 表格中checkbox选中一行数据

前言 不知道是不是大家也遇到过类似的表单,但我绝对是第一次见,如下图所示,表单中包含了表格. 上图中的表格数据是根据数据库中学生表而变化的,这增加了获取表中数据的复杂程度,这里仅仅是记录js如何获取数据传值到后端的办法,所以,仅以表格中张三.李四为例. 示例代码 html <div class="modal-body"> <form id="exam-score-add-form" class="smart-form">

JS实现表格自动隔行换色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>JS实现表格自动隔行换色丨石家庄冷风机|</TITLE> </HEAD> <BODY> <style> .t1 {background-color:#C8FC98;text-align:center} .t2 {backgro

在一个TextView中字体显示不同颜色

要想使得TextView字体显示不同颜色,可以使用好几个TextView组合使用,还可以通过下面的方式在在一个TextView中字体显示不同颜色 直接上代码: search_intruction = (TextView) findViewById(R.id.search_intruction); search_intr = this.getString(R.string.search_intruction); SpannableStringBuilder style = new Spannabl

JS——表格的隔行换色

1.不使用JS完成表格的隔行换色: <html> <head> <meta charset="utf-8"> <title>成绩登记表格</title> </head> <body> <table width="600" border="1" align="center" cellpadding="5" cellspa

15.10DataGridView隔行显示不同的颜色

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace _15._10DataGridView隔行显示不同颜

LigerUI中通过加载服务端数据进行表格的分页显示

前言:我的这一篇文章是紧接着上一篇关于LigerUI的文章(http://www.zifangsky.cn/379.html)写的,因此在这里我就省略了相关的环境搭建,直接进入正题 一 介绍 在LigerUI中显示表格是用的ligerGrid,同时我们可以通过配置url参数就可以加载远程数据并显示成表格形式.不仅如此,ligerGrid还可以进行数据的排序和分页显示: (1)排序:需要用到"sortname"和"sortorder"这两个参数,分别表示按哪个字段排序

[email&#160;protected]:向表格中动态添加行显示信息,做到滚动效果

最近在学习D3,很多时候都用到了表格,并且在js中动态地添加和删除表格,在这里总结一下js关于表格的操作: 首先要知道,js中没有提供关于列的操作,所以关于列的操作只能通过操作行来实现,比如获得列的数量,只能通过获得行的单元格数量来获得列数(这里也有缺陷,如果某个单元格设置了colspan属性,就会出错). table.rows.length//获得表格的行数 table.rows[0].cells.length//获得表格第一行的单元格的数量 table.insertRow(i)//插入第(i

JS中同步显示并分割输入的数字字符串

题目比较晦涩,来张图来说明要表达的效果: 第一张图的效果就是,用户输入一个数字,上面就显示一个大层,然后显示输入的数字,并把数字用空格按照每四位分割出来.好像在建行的网上银行上面就有这种效果.第二个图的效果就是用户在一个文本框中输入一串数字,然后再光标离开的时候,把数字按照每三位用逗号给分割开来,类似于老外的金钱输入效果. 效果一 同步显示分割分割输入 这种效果中,仿造的就是输入银行卡子类的,故只能够输入数字,需要禁用用户输入的其它字符下面是几种实现方式.先贴上HTML和CSS代码: 1 <ht

如何在一个TextView中显示不同颜色的文本

在唯品会app中,我们可以看到它里面有些文本控件能够显示不同颜色的文本,这种效果看起来蛮不错的.先上个效果图: 其实,在这上面使用的是一个TextView控件来显示这段文本的.而文本内容是使用html的格式实现的,代码如下: text.setText(Html.fromHtml("<font color=\'#858585\'>购买前如有任何疑问,欢迎使用:</font><font color=\'#f02387\'><U>购物咨询</U&g