JavaScript 表格高亮类的应用[高级]

表格高亮

* {
font-size: 11px;
font-family: verdana, arial, sans-serif;
}

table {
border: 1px solid #ccc;
margin: 0 auto;
}

th {
background-color: #f7f7f7;
}

td, th {
padding: 15px;
border: 1px solid #ccc;
}

tr.alternate {
background-color: #efd;
}

.bold {
font-weight: bold;
}

.red {
color: red;
font-weight: bold;
}

.blue {
background-color: blue;
}

/* Used with crosshairs.js */
.hoverHilight {
background-color: #ffffc0;
cursor: pointer;
}

.activeCellHilight {
background-color: #c0dbff;
color: blue;
}

var hilightClass = "hoverHilight";
var activeHilightClass = "activeCellHilight";

var hilightActive = 1;
var hilightCol = 1;
var hilightRow = 1;
var hilightTopHeader = 0;
var hilightLeftHeader = 0;
var hilightRightHeader = 0;
var hilightBottomHeader = 0;
var surroundActive = 0;
function initCrossHairsTable(id, topPad, rightPad, bottomPad, leftPad) {
var tableObj = document.getElementById(id);
var c = tableObj.rows[0].cells.length - rightPad;
var r = tableObj.rows.length - bottomPad;

for (var i = topPad; i

  编号 姓名 地址 电话
1 a1 b1 c1 d1
2 a2 b2 c2 d2
3 a3 b3 c3 d3
4 a4 b4 c4 d4
5 a5 b5 c5 d5

initCrossHairsTable("crossTable", 1, 0, 0, 1);//控制

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

赞 (0)

相关推荐

  • javascript上下方向键控制表格行选中并高亮显示的方法

    本文实例讲述了javascript上下方向键控制表格行选中并高亮显示的方法.分享给大家供大家参考.具体实现方法如下: <style> tr.highlight { background:#08246B; color:white; } </style> <table border="1" width="70%" id="ice"> <tr onClick="selectTR();return fa

  • 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通过事件代理高亮显示表格行的方法

    本文实例讲述了JavaScript通过事件代理高亮显示表格行的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Highlight Rows</title> <style type

  • JS+CSS实现表格高亮的方法

    JS+CSS实现表格高亮的方法

    本文实例讲述了JS+CSS实现表格高亮的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript+CSS实现表格高亮的功能,实际上类似于隔行换色的效果,说法不同而已,只不过本效果是在鼠标移上时触发,移出结束. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran

  • 高效的表格行背景隔行变色及选定高亮的JS代码

    这段JS放在head中 复制代码 代码如下: //点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) { var sTable = document.getElementById("ServiceListTable") for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行 { if (sTable.rows[i] != target) //判断是否当前

  • 高亮显示web页表格行的javascript代码

    本篇作为开发学习笔记之一. [文] 在web开发中经常遇到需要加亮鼠标指向的表格行的情况.首先说说一般的情况. ·简单尝试 CSS2中允许我们对HTML元素使用hover伪类,这极大的方便了对于表格的样式的控制. 我们从一个小例子开始: XHTML(只列出了表格部分,请自行补完页面,本例在Transational的DTD下通过): 复制代码 代码如下: <table class="datatable" cellspacing="0"> <thead

  • javascript简单实现表格行间隔显示颜色并高亮显示

    复制代码 代码如下: <script type="text/javascript"> var name; //存储tr对象的类名,当鼠标移开时进行恢复 function trcolor(){ //表格行颜色间隔显示 var tabNode = document.getElementsByTagName("table")[0]; var trNodes = tabNode.rows; for(var x=1;x<trNodes.length;x++)

  • JavaScript 表格高亮类的应用[高级]

    表格高亮 * { font-size: 11px; font-family: verdana, arial, sans-serif; } table { border: 1px solid #ccc; margin: 0 auto; } th { background-color: #f7f7f7; } td, th { padding: 15px; border: 1px solid #ccc; } tr.alternate { background-color: #efd; } .bold

  • JS实现的表格操作类详解(添加，删除，排序，上移，下移)

    JS实现的表格操作类详解(添加，删除，排序，上移，下移)

    本文实例讲述了JS实现的表格操作类.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css">*{font-size:14px}button{margin

  • JavaScript中的类(Class)详细介绍

    在JavaScript中,可以使用类(Class)来实现面向对象编程(Object Oriented Programming).不过,JavaScript中的类与Java中的有所不同,其相应的定义和使用也不一样. JavaScript中类的定义 在JavaScript中,所有从同一个原型对象(prototype)处衍生出来的对象组成了一个类:也就是说,JavaScript中的类是一个对象集合的概念,如果两个对象它们的prototype相同,那么它们就属于同一个类:JavaScript中的类甚至都

  • Javascript 中的类和闭包

    有人说javascript也是面向对象的,只是它是prototype based,当然这只是概念上的区别,我不想讨论js是不是面向对象的,关键是想说明虽然javascript的类表现得很像其他语言中的类,但是内部的实现机理确不太一致,如果一味的把javascript中的类类比作其他语言中的类,有时候脑子会犯混. 先看一段简单的代码,一般教材上介绍如何新建一个类的时候都是这样的(当然还有更复杂的方法,不过本质上是一样的): 复制代码 代码如下: function MyClass(x) { this

  • JavaScript中的类继承

    JavaScript Inheritance DouglasCrockfordwww.crockford.com And you think you're so clever and classless and free--John Lennon JavaScript一种没有类的,面向对象的语言,它使用原型继承来代替类继承.这个可能对受过传统的面向对象语言(如C++和Java)训练的程序员来说有点迷惑.JavaScript的原型继承比类继承有更强大的表现力,现在就让我们来看看. Java Jav

  • JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Javascript如何实现类定义,并创建对象. 一.定义类并创建类的实例对象 在Javascript中,我们用function来定义类,如下: function Sh

  • javaScript中定义类或对象的五种方式总结

    第一种方式: 工厂方法 能创建并返回特定类型的对象的工厂函数(factory function). function createCar(sColor){ var oTempCar = new Object; oTempCar.color = sColor; oTempCar.showColor = function (){ alert(this.color); }; return oTempCar; } var oCar1 = createCar(); var oCar2 = createCa

  • 果断收藏9个Javascript代码高亮脚本

    果断收藏9个Javascript代码高亮脚本

    代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 目前,有很多免费而且有用的代码高亮脚本.这些脚本大多是由Javascript语言编写,也有些使用其它语言(比如java.Phyton或Ruby)等写的. 下面来推荐最受欢迎.最实用的9个Javascript代码高亮脚本. 1.SyntaxHighlighter 我相信这是最普遍代码高亮代码.它支持多种

  • 2014最热门的JavaScript代码高亮插件推荐

    2014最热门的JavaScript代码高亮插件推荐

    对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,Sy

随机推荐