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:#f7f7f7;}
2006年 | 2007年 | 2008年 | 2009年 | |
---|---|---|---|---|
总 | ||||
4 | 2 | 56 | 43 | |
10 | 4 | 10 | 10 | |
10 | 76 | 10 | 9 | |
总 | ||||
10 | 10 | 10 | 10 | |
2 | 10 | 12 | 10 | |
10 | 10 | 10 | 10 | |
总 | ||||
10 | 5 | 10 | 10 | |
10 | 7 | 10 | 3 | |
10 | 5 | 7 | 8 |
var bg=document.getElementsByTagName('tr');
for(var i=0,j=0;i
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
原生javascript实现隔行换色
js让我们一起从基础来学习,我们一点一点的来学习 下边是我写的代码,然后大家看着学习下吧!!! 复制代码 代码如下: <html> <head> <title>js演示</title> </head> <body> <script> document.write('<table border="1" width="100px" align="center"&
-
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
-
JS+CSS实现Li列表隔行换色效果的方法
本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xh
-
js实现表格字段排序
1.比较函数生成器: 复制代码 代码如下: /** * 比较函数生成器 * * @param iCol * 数据行数 * @param sDataType * 该行的数据类型 * @return */function generateCompareTRs(iCol, sDataType) { return function compareTRs(oTR1, oTR2) { vValue1 = convert(oTR1.c
-
不用javascript实现带序号的表格隔行换色的效果
.test{ border:1px solid #000; color:#333; font:12px; } .test ol li{ padding-left:5px; background-color:expression(this.sourceIndex%2? '#efefef':'#fefefe'); } 观自在菩萨 行深般若波罗密多时 照见五蕴皆空 度一切苦厄 舍利子 色不异空 空不异色 色既是空 空既是色 受想行识 亦复如是 舍利子 是诸法空相 不生不灭 不垢不净 不增不减 是故空中
-
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
-
jquery tablesorter.js 支持中文表格排序改进
代码: 仿一个网友的代码写的,不记得出自哪里了,改成可以支持中文排序,而且支持控件value的排序. 没办法,能力有限,只能... 复制代码 代码如下: //转换器,将列的字段类型转换为可以排序的类型:String,int,float function convert(sValue, sDataType) { switch(sDataType) { case "int": return parseInt(sValue); case "float": return p
-
33种Javascript 表格排序控件收集
1. jQuery tablesorter http://tablesorter.com/docs/ 2. Table sorting with Prototype http://tetlaw.id.au/view/blog/table-sorting-with-prototype/ 3. Sorttable http://www.kryogenix.org/code/browser/sorttable/ 4. Table Sorting Javascript http://yoast.com/
-
JS实现隔行换色的表格排序
1.获取元素 2.获取数据 3.绑定数据 4.隔行换色 5.表格排序 <table cellpadding="0" cellspacing="0" id="tab"> <thead> <tr> <th class="cursor">姓名</th> <th class="cursor">年龄</th> <
-
使用JavaScript和CSS实现文本隔行换色的方法
先来看一个简单的方法. 在 css 中定义两种样式 .odd{...} 和 .even{...} 分别用于奇数行和偶数行的不同背景颜色.在网页加载后通过 javascript 获取要变色的标签列表,执行如下代码: // 当文件加载时,执行代码. window.onload = function() { // 获取<ul id="list" />对象 var list = document.getElementById('list'); // 获取list下面的所有li va
-
javascript 表格排序和表头浮动效果(扩展SortTable)
一.SortTable说明 SortTable version 2 7th April 2007 Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/ Instructions: Download this file Add <script src="sorttable.js"></script> to your HTML Add class="sortable"
随机推荐
- BAT 解密工具
- SQLServer 中的死锁说明
- 工作中常用的js、jquery自定义扩展函数代码片段汇总
- 通过UIKit坐标系来全面掌握iOS中的UIScrollView组件
- PHP版本常用的排序算法汇总
- 一些mysql启动参数的说明和优化方法
- 在Ubuntu15.04上安装Docker的步骤以及基本用法
- Ajax工作原理深入理解
- 在IE浏览器中resize事件执行多次的解决方法
- js css后面所带参数含义介绍
- php微信公众账号开发之五个坑(二)
- go各种import的使用方法讲解
- PyQt5实现从主窗口打开子窗口的方法
- python是否适合网页编程详解
- Java版微信公众号支付开发全过程
- Vue监听事件实现计数点击依次增加的方法
- MapTask阶段shuffle源码分析
- PHP fclose函数用法总结
- python实现一个简单的ping工具方法
- 基于thinkphp6.0的success、error实现方法