怎样在html文档里做隔行换色的多行方法

既然你都知道是隔行换色了，那就隔行换色就是了。方法很多。
最直接的在每一行的<tr>上直接加bgcolor="red"。
用css的话就定义行二个颜色的类。在每一行交替使用这个类就是了。如：
tr class="trClass1"
tr class="trClass2"

New Document

table{
width:100%;
}
.t1{
background:#ff6600;
color:black;
}
.t2{
background:#336699;
color:white;
}




















11111
21111
11111
21111
11111
21111

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

推荐1

无标题文档

第1行 第1行
第2行 第2行
第3行 第3行
第4行 第4行

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

function c(n){
if ((n%2)==1){
document.write('

');
}
else {document.write('

');}

}


c(1);

c(2);

c(3);

c(4);

blueidea.com 第1行
blue 第2行
idea 第3行
29ok.com 第4行

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

非常推荐2

表格隔行换色

12 12 12 12
12 12 12 12
12 12 12 12
12 12 12 12
12 12 12 12

0)?"t1":"t2";
}
}
window.onload=$;
for(var i=0;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

Untitled Document

.t1 {background-color:#336699;text-align:center}
.t2 {background-color:#ffcc00;text-align:center}

jsjsdjksdfdfgdfd
vrtbtynyudegbg
btrgjyjyukmymy
fvdfthdhyjd
htyjertyuktuijcdukdetyjety
fdghrguiowheruighiaue
aosiiopweorhwdebfcjlhaSD
SDHFKAJBNELFJAOSDFA
山地花费
是士大夫金粟兰搭街坊棵
打开立脚点艰苦发挥感
地方了；赶快地方经过
当然人；铁蒺藜课题那样立刻人
豆腐干大后方大概部分
如同如同忽然体育如同
规范化如同依然同样如
为了打开

for (i=0;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 基于Jquery的表格隔行换色，移动换色，点击换色插件

    基于Jquery的表格隔行换色，移动换色，点击换色插件

    效果图:编写JQUERY插件如下: 复制代码 代码如下: ;(function($) { $.fn.extend({ "alterBgColor":function(options){ //设置默认值 option=$.extend({ odd:"odd", even:"even", selected:"selected" },options); //注意这个options 同上面的function(options)中的opt

  • asp.net 水晶报表隔行换色实现方法

    在报表中右键 -> Insert -> Sections,找到要设置背景色的区域,我这里是Details区域.在右边选项卡中选择Color,勾上背景色选项,设置好默认颜色.点击表达式按钮,输入以下代码. 复制代码 代码如下: if recordnumber mod 2=0 then Color (220, 225, 214) else crWhite 上面的代码需要说明的是Color()函数,这是水晶报表提供的设置自定义颜色函数,里面三个参数分别对应R.G.B三种基础颜色,通常我们必须把在CS

  • Js 实现表格隔行换色一例

    Js实现表格隔行换色一例 body{ padding:0; margin:0; font:Arial; font-size:12px;} .bf{ padding:0; margin:auto;} .bf table{ text-align:center;line-height:14pt;} .bf th{ width:50px; padding:10px;} .f1{ background:#fff8f0;} .f2{ background:#f0f7ff;} .f3{ background:

  • 不用javascript实现带序号的表格隔行换色的效果

    .test{ border:1px solid #000; color:#333; font:12px; } .test ol li{ padding-left:5px; background-color:expression(this.sourceIndex%2? '#efefef':'#fefefe'); } 观自在菩萨 行深般若波罗密多时 照见五蕴皆空 度一切苦厄 舍利子 色不异空 空不异色 色既是空 空既是色 受想行识 亦复如是 舍利子 是诸法空相 不生不灭 不垢不净 不增不减 是故空中

  • JS实现简洁(隔行换色、高亮显示)表格特效

    JS实现的表格 document.write(' '); var i=0; while(i') } document.write(' '+i+' '); i++; //document.write(' '); } if(i%10==0){ document.write(' '); } document.write(' '); var ys=null; function show(obj){ ys=obj.bgColor; obj.bgColor="red"; } function no

  • javascript 隔行换色函数代码

    先定义两个关于背景色的样式tag为id对象c1为样式1c2为样式2 复制代码 代码如下: <script> function changeRowsBg(tag,c1,c2) { var i = 0; var obj_tag = document.getElementsByTagName(tag); for(i = 0;i < obj_tag.length ;i++){ (i%2 == 0)? obj_tag(i).className = c1 : obj_tag(i).className

  • repeater隔行换色与鼠标停留在上面达到变色效果

    复制代码 代码如下: <tr align="center" class="list_L01" style='background-color: <%#(Container.ItemIndex%2==0)?"#FFFFF;":"#fcf3f4"%>' onmouseover="change_colorOver(this)" onmouseout="change_colorOut(t

  • 表格 隔行换色升级版

    昨天弄了个表格隔行换色,但是只是一张表里换 如果一个页面里出现多个表格需要怎么整 捣鼓出新的结果 如下: 复制代码 代码如下: function onloadEvent(func){ var one=window.onload if(typeof window.onload!='function'){ window.onload=func } else{ window.onload=function(){ one(); func(); } } } function showtable(table

  • jQuery 隔行换色 支持键盘上下键，按Enter选定值

    复制代码 代码如下: <!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=&qu

  • 怎样在html文档里做隔行换色的多行方法

    既然你都知道是隔行换色了,那就隔行换色就是了.方法很多. 最直接的在每一行的<tr>上直接加bgcolor="red". 用css的话就定义行二个颜色的类.在每一行交替使用这个类就是了.如: tr class="trClass1" tr class="trClass2" New Document table{ width:100%; } .t1{ background:#ff6600; color:black; } .t2{ back

  • 利用JavaScript的%做隔行换色的实例

    如下所示: <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> li { list-style-type: none; width: 300px; height: 30px; } </style> </head> <body> <ul>

  • 基于JavaScript实现表格隔行换色

    表格隔行换色 需求分析 我们商品分类的信息太多,如果每一行都显示同一个颜色的话会让人看的眼花,为了提高用户体验,减少用户看错的情况,需要对表格进行隔行换色 技术分析 table对象 集合 cells[]:返回包含表格中所有单元格的一个数组. rows[]:返回包含表格中所有行的一个数组. tBodies[]:返回包含表格中所有tbody 的一个数组. 步骤分析 确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:操作页面的元素 要操作表格中每一行 动态的修改

  • ASP+CSS 实现列表隔行换色

    列表隔行换色是指在新闻和文章列表中,前一行和后一行的背景色交替显示,也可称为斑马线,给网页可增色不少.今看到小毅在BI的贴子"标准下隔行换色的思考",采用UL的两行背景重复,虽说方法不错,但LI里的高度只能采用背景中的实际高度,不够灵活,所以用ASP+CSS 写了一个,采用自定义列表. <% set rs=...... sql="......" rs.open sql,con,1,1 %> <dl> <% i=0 do while no

  • jQuery方法简洁实现隔行换色及toggleClass的使用

    今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隔行换色</title> <script src="js/jquery-1.4.2.min.js"></script> <style type=&quo

  • jQuery实现table隔行换色和鼠标经过变色的两种方法

    一.隔行换色 复制代码 代码如下: $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定: 复制代码 代码如下: $("table tr:nth-child(odd)").css("background-col

  • 使用JQ完成表格隔行换色的简单实例

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色. 2.具体代码实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色&

随机推荐