OK，让我们来看一下这些表格:

1. Tablecloth

Tablecloth 由CSS Globe 开发，是一个轻巧易于使用的表格，简洁的将表格样式添加到你的HTML 表格元素中。

2. Ask the CSS Guy Table

Ask the CSS Guy Table教给我们要如何去创建能够清晰显出去资料之间的相关联系的表格，例如:点击一个表格元素时，将突了显示这个元素，并且在纵列和横列都显示出相关的类别关系。

#3. A CSS styled table version 2

Veerle Duoh 为我们展示了一个漂亮的表格设计，并教我们如何使用CSS来吸引用户的眼球。

#4. Sortable Table

Sortable Table 演示了如何按升序或降序排列以及如何过滤表格中的数据。

5. Row Locking with CSS and JavaScript

Css Guy再次对表格使用了聚焦高亮的效果，除非用户再次点击，否则表单数据将一直保持亮高。

他还给了我们另一个示例:another example to Lock rows with radios .

#6. Vertical scrolling tables

如果您有大量的表格数据，但却没有太大的空间来展示它，这可能是个比较好的方法:一个纯CSS的表格与固定的标题和页脚，以及滚动显示的内容。

7. Replicating a Tree table

这是一个使用HTML 和CSS 设计的树形状表格。

8 ) Paginate, sort and search a table with Ajax and Rails

这个表格提供了一个动态的界面，而不需要重新刷新整个页面。

9. Collapsible tables with DOM and CSS

此表格加上箭头形象的脚本提示，用来控制表格的伸展和收缩。

10. TableSorter plug-in for jQuery

它的主要特性包括多列排序，支持<TH>的rowspan和colspan属性以及许多其他功能。

11. Stripe your tables the OO way

使用了Javascript 为表格中的行进行颜色交替，并且添加了onmouseover 和onmouseout 事件，当鼠标点击时，切换背景颜色。

12. MooTools Table Row & Column highlighting

基于MooTools 框架，高亮显示鼠标悬停时的单元格所在的行和列。

13. CSS Table Gallery

93 styled tables是一个专门收集表格样式的站点，下面是来自一个表格样式的截图:

14. jQuery Table Filter

可以对数据进行各种不同的排序、过滤。

15. Sortable/Resizable/Editable TableKit

TableKit基于Prototype框架，专门收集各种HTML表格，可以利用Ajax实时的进行表格栏目大小、排序等编辑。

16. Make all your tables sortable

17. Zebra Tables

alistapart为我们提供了一个极好的例子，如何使用JavaScript和DOM的改变背景色风格，以突出显示单元格。

18. Standardista Table Sorting

Standardista Table Sorting 是一个Javascript模块，让您可以对HTML数据表的任何栏目进行排序。

19. GridView3 Example

20. Mootable

21. Drag & Drop Sortable Lists with JavaScript and CSS

可能还会有一些你更想寻找的详细资料，下面是一些相关的资源链接:

• Bring on the Tables
• Accessible Data Tables
• Designing Data Tables
• Brainjar Table Sort
• Table Sorter

如果你知道其它更强大的Ajax/CSS表格，欢迎在此留言。

自以为觉得Js对象是很好理解的东东，然而真实践起来却一片糊涂。
通过查阅经典书籍《Professional JavaScript For Web Developers》稍微有些理解了

JavaScript的基本类型
原始类型如: Undefined Null Boolean Number String 等 用 typeof方法能辨别之
引用类型如: Object Function Array Boolean Number String Date等，用insanceof方法辨别之

严格来讲，JavaScript没有对象(Object),但是由于和OO术语对应，所以也称之为对象。所以Array,Function，基本类型，引用类型，函数，以及函数的属性 等等这些都是对象。

而对象分类，则可以分为内置对象(Built-in Object) 和宿主对象(host object)。
内置对象如 Math,Data啊。
宿主对象则如 BOM,DOM之类.

重新回顾了下这些基本概念之后，在做简单实践就有些理解了。
因此对象的使用，创建方式不尽相同，最简单的归类如下:

1 基本创建方式

function Class() {
window.alert("Hello Class!");
}
var clz= new Class();

2 访问对象成员

function Class(){
this.x = " this is x";
this.y = "this is y";
this.z = viewXY;
function viewXY(){
alert("x+","+y);
}
}
var clz= new Class();
clz.viewXY();

3 对象继承

function Parent() {
this.type= "human!";
}
function Child(){
this.age = "26";
this.sex ="male";
this.say= myInfo;
function myInfo(msg){
alert(msg+this.type+ ","+this.age+","+this.sex);
}
}
Child.prototype = new Parent();
var clild = new Child();
clild.say("I'm ");

4.重用原对象 (书上的例子太好了，搬来了)

Funcion.prototype.toString() = function(){
return "Function code hidden";
}
function sayHi(){
alert("hi");
}
alert(sayHi.toString());

图像的预加载

       浏览器通常的工作方式是：只有当要求加载图像的HTTP请求被发送的时候，图像才会被加载，而不论它是被动地通过<img>标记加载，还是主动地通过方法调用加载。所以，如果你有一段JavaScript，需要在鼠标悬停的时候切换图像，或者在超时之后自动地更换图像，那么你就可能会在从服务器取回图像的时候随时碰到等待，时间会从数秒钟到几分钟不等。当你以较慢的速度连接到Internet上的时候，或者被取回的图像非常巨大的时候，这种状况尤其显著，而这种数据延迟通常都会毁掉你所期望的效果。

        有些浏览器会试图转嫁这一问题，比如把图像保存在本地缓冲区里，这样以后对它的调用就能够很快进行了，但是需要第一次调用图像的时候仍然会产生延迟。预加载是一项在需要图像之前就把它下载到缓冲区里的技术。通过这种方式，当真的需要图像的时候，它可以被从缓冲区里取出来，并立即显示出来。

Image()对象
        预加载图像最简单的方法用JavaScript将一个新的Image()对象实例化，并把你想要预加载的图像的URL传递给它。假设我们有一个叫做http://www.host01.com/Get/jsp/00040004/heavyimagefile.jpg的图像，我们希望，当用户把鼠标放在一个已经显示过的图像上的时，系统能够显示出这个图像。为了预加载这个图像，以便实现更快的响应时间，我们只用创建一个新的Image()对象，将其命名为heavyImage，并使用onLoad()事件处理程序把它同时加载到页面上。

1 < html >< head >< script  language  = "JavaScript" > function  preloader()  {heavyImage  =   new  Image(); heavyImage.src = " http://www.host01.com/Get/jsp/00040004/heavyimagefile.jpg " ;} </ script ></ head >< body  onLoad ="javascript:preloader()" >< a  href ="#"  onMouseOver ="javascript:document.img01.src='http://www.host01.com/Get/jsp/00040004/heavyimagefile.jpg'" >< img  name ="img01"  src =http://www.host01.com/Get/jsp/00040004/"justanotherfile.jpg" ></ a ></ body ></ html >
2

          要注意的是，图像标记自身并不会处理onMouseOver()和onMouseOut()事件，这就是为什么上面例子里的<img>标记被放在一个<a>标记里，后者的确加入了对这些事件类型的支持。
用数组加载多个图像

           在实际操作中，你可能需要预加载一幅以上的图像；例如，在包含有多个图像翻滚（rollover）的菜单条里，或者如果你正在尝试创建平滑的动态效果。这并不困难；你所需要做的就是使用JavaScript的数组，就像下面例子里的一样：

1 < script language = " JavaScript " > function  preloader()  {  //  counter var i = 0; // create object imageObj = new Image(); // set image list images = new Array(); images[0]="image1.jpg" images[1]="image2.jpg" images[2]="image3.jpg" images[3]="image4.jpg" // start preloading for(i=0; i<=3; i++) { imageObj.src=images[i]; }
2 }   </ script >

         在上面的例子里，你先定义变量i和叫做imageObj的Image()对象。然后定义一个叫做images[]的新数组，在这个数组里，每个数组元素都保存着需要预加载的图像来源。最后，创建一个for()循环，让它在数组里循环，并将它们中的每一个都指派给Image()对象，这样就能够把它预加载到缓冲区里。
onLoad()事件处理程序
        就和JavaScript里的其它很多对象一样，Image()对象也带有多个事件处理程序。这其中最有用的毫无疑问的就是onLoad()处理程序了，它会在完成图像加载的时候被调用。这个处理程序可以与自定义的函数一起使用，以便在完成图像加载之后进行特定的任务。下面的例子通过在图像加载的时候显示“请等待（please wait）”提示信息来说明这个问题，然后在图像完成加载之后就向浏览器发送一个新的URL。

< html >< head >< script  language ="JavaScript" > //  create an image objectobjImage = new Image(); // set what happens once the image has loaded objImage.onLoad=imagesLoaded(); // preload the image fileobjImage.src='http://www.host01.com/Get/jsp/00040004/images/image1n.gif';// function invoked on image loadfunction imagesLoaded(){ document.location.href='index2.html';}</script></head><body>Please wait, loading images</body></html>

       当然，你还可以创建一个图像数组，对它进行循环，预加载每个图像，并在每个阶段对已加载图像的数量保持跟踪。一旦加载了所有的图像，事件处理程序就能够按照设定把浏览器带到下一个页面（或者进行其他的任务）。

预加载与多状态菜单

          现在，把你刚刚学到的理论付诸真正的实践怎么样？下面一部分内容就是我碰巧编写的一段代码——一个由多个按钮（图像链接）组成的菜单条——其中每个按钮都可能处于三种状态中的一种：正常（normal）、hover（悬停）和点击（click）。由于所有的按钮都有多个状态，所以就有必要使用图像预加载来确保菜单能够根据其切换到的状态进行快速的响应。列表A里的代码就说了这一点。

           列表A里的HTML代码会建立一个由四个按钮组成的菜单条，每个按钮都有三种状态：正常、悬停和点击。其要求如下：

          但鼠标移动到处于正常状态的按钮上时，按钮会变为悬停状态。当鼠标移开的时候，按钮又会恢复到正常状态。当鼠标点击按钮的时候，按钮就会变为点击状态。它会一直保持这个状态，直到另外一个按钮被点击。如果有一个按钮被点击，那么其他的按钮就都不能处于点击状态。其他的按钮只能够处于悬停或者正常状态。一次只能有一个按钮可以被点击。一次只能有一个按钮处于悬停状态。
        第一项任务是建立保存有菜单每个状态的图像的数组。与这些数组元素相对应的<img>元素也都在HTML文档的主体里被创建，并按顺序命名。要注意的是，对数组值的索引是从0开始的，而相应的<img>元素是从1开始命名的——这就需要在脚本后面的一段里进行某种计算上的调整。

        PreloadImages()函数会负责把所有的图像都加载到缓冲区里，这样的话对鼠标移动的响应时间会被减到最小。一个for()循环被用在第一步里创建的图像里进行迭代，并预加载每一个图像。

            ResetAll()函数是把所有图像恢复都到它们正常状态的方便方法。这是有必要的，因为当菜单的项目被点击的时候，菜单里其他所有的项目都必须在被点击项目能够切换到点击状态之前恢复到正常状态。

        SetNormal()、setHover()和setClick()函数负责把特定图像（图像的编号被作为函数的自变量进行传递）的来源分别改为正常、悬停或者点击状态。由于被点击的图像必须一直保持点击状态，直到另外一个图像被点击（见第二项要求），所以它们暂时不会对鼠标移动作出反应；这样的话，如果按钮还不是处在点击状态，那么setNormal()和setHover()函数所包括的代码就只能用来改变按钮的状态。

         上面所提到的预加载只是提高你JavaScript效果响应时间的多种方法之一。就在你的网站上使用上面列出的技巧，并根据你的要求在需要的地方更改它们吧。祝你好运！

　　一、多样化摺叠菜单：下载

　　一个由老外写的折叠式垂直菜单，多样化，多功能，可自订，使用容易，支持FF。

图1

　　二、CSS圆角边框：下载

　　以CSS为主要，用Java Script封装的相当完整，也是老外写的，支持多浏览器，可以自订样式，目前有十多种可以运用。

图2

图3

　　三、模拟视窗：下载

　　用层模拟的视窗，是一个中国高手写的，Java Script封装的相当好，使用上也很容易

图4

　　四、支持FF的省略符：下载

　　说到省略符，那非CSS莫属，有个老外用Java Script来实现，并且是批量处理的，重点是支持FF。

图5

　　五、TAB选项卡：下载

　　用Java Script模仿各种作业系统的选项卡，老外就是牛，不仅支援多样式的即时切换，同时也支援每个选项卡是否附带图示的切换选项，选项卡也可以上下切换。

图6

　　六、最佳化多样式Windows：下载

　　用层模拟视窗的最佳代表作，这是我看过功能最多的模拟式窗，内附多达74项功能与样式，你完完全全可以把它当成是一个真正的视窗来应用，可以根据你的需求来应用，快丢掉你那认为好用的层视窗，这套封装非常完整的视窗绝对可以满足你的各种需求。

图7

图8

　　七、多样化的垂直菜单：附件

　　别具风格的方块式垂直折叠菜单，目前有8种风格可以运用，如果你已经厌烦WEB上平凡的菜单，这套在国外颇受欢迎的菜单肯定是你的最佳首选。

图9

　　八、多样化的连结提示效果：下载

　　这个连结提示样式允许你直接写入css与html，共有14项功能可以让你自订。

图10

　　九、侧栏式折叠菜单：下载

　　这是一个侧栏式的折叠菜单，它允许你设置它是否有过渡效果、侧栏菜单是否自动伸缩、菜单项切换是否允许动画过渡、是否轮替切换等多项设置，并且也有多种样式可以运用。

　　这个脚本有个很好玩的东东，下载并且解压後，请进入samples的目录并打show.html看看效果，我不知道这效果容不容易实现，但是这效果很牛，菜单全自动运行的～

图11

　　十、图形滚动条：下载

　　老外写的图形滚动条，有多种样式，在ie里头还支持滚轮滚动。

图12

　　十一、图片倒影效果：下载
　　说到图片倒影，不外乎就是直接作成图片跟css滤镜来实现，但是这个是用Java Script实现的，值得借镜。

图13

　　十二、代码自动高亮：下载

　　虽说这不是什麽新东西，但总是会有人需要吧，而且想学正则表达的人，这肯定是最佳借镜的作品。

图14

匹配中文字符的正则表达式： [\u4e00-\u9fa5]

匹配双字节字符(包括汉字在内)：[^\x00-\xff]

应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;}

匹配空行的正则表达式：\n[\s| ]*\r

匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/

匹配首尾空格的正则表达式：(^\s*)|(\s*$)

应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下：

String.prototype.trim = function()
{
    return this.replace(/(^\s*)|(\s*$)/g, "");
}

利用正则表达式分解和转换IP地址：

下面是利用正则表达式匹配IP地址，并将IP地址转换成对应数值的javascript程序：

function IP2V(ip)
{
 re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g  //匹配IP地址的正则表达式
if(re.test(ip))
{
return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
}
else
{
 throw new Error("Not a valid IP address!")
}
}

不过上面的程序如果不用正则表达式，而直接用split函数来分解可能更简单，程序如下：

var ip="10.100.20.168"
ip=ip.split(".")
alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))

匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?

利用正则表达式去除字串中重复的字符的算法程序：[注：此程序不正确，原因见本贴回复]

var s="abacabefgeeii"
var s1=s.replace(/(.).*\1/g,"$1")
var re=new RegExp("["+s1+"]","g")
var s2=s.replace(re,"")
alert(s1+s2)  //结果为：abcefgi

我原来在CSDN上发贴寻求一个表达式来实现去除重复字符的方法，最终没有找到，这是我能想到的最简单的实现方法。思路是使用后向引用取出包括重复的字符，再以重复的字符建立第二个表达式，取到不重复的字符，两者串连。这个方法对于字符顺序有要求的字符串可能不适用。

得用正则表达式从URL地址中提取文件名的javascript程序，如下结果为page1

s="http://www.9499.net/page1.htm"
s=s.replace(/(.*\/){0,}([^\.]+).*/ig,"$2")
alert(s)

利用正则表达式限制网页表单里的文本框输入内容：

用正则表达式限制只能输入中文：onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"

用正则表达式限制只能输入全角字符： onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"

用正则表达式限制只能输入数字：onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

用正则表达式限制只能输入数字和英文：onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

　　正则表达式(regular expression)对象包含一个正则表达式模式(pattern)。它具有用正则表达式模式去匹

配或代替一个串(string)中特定字符(或字符集合)的属性(properties)和方法(methods)。

正则表达式构造函数： new RegExp("pattern"[,"flags"]);
参数说明：
pattern -- 一个正则表达式文本
flags -- 如果存在，将是以下值：
g: 全局匹配
i: 忽略大小写
gi: 以上组合

在构造函数中，一些特殊字符需要进行转意(在特殊字符前加"\")。正则表达式中的特殊字符：
字符  含意 
\ 转意，即通常在"\"后面的字符不按原来意义解释，如/b/匹配字符"b"，当b前面加了反斜杆后/\b/，转意为

匹配一个单词的边界。
-或-
对正则表达式功能字符的还原，如"*"匹配它前面元字符0次或多次，/a*/将匹配a,aa,aaa，加了"\"后，/a\*/

将只匹配"a*"。 
^  匹配一个输入或一行的开头，/^a/匹配"an A"，而不匹配"An a" 
$  匹配一个输入或一行的结尾，/a$/匹配"An a"，而不匹配"an A" 
*  匹配前面元字符0次或多次，/ba*/将匹配b,ba,baa,baaa 
+  匹配前面元字符1次或多次，/ba*/将匹配ba,baa,baaa 
?  匹配前面元字符0次或1次，/ba*/将匹配b,ba 
(x)  匹配x保存x在名为$1...$9的变量中 
x|y  匹配x或y 
{n}  精确匹配n次 
{n,}  匹配n次以上 
{n,m}  匹配n-m次 
[xyz]  字符集(character set)，匹配这个集合中的任一一个字符(或元字符) 
[^xyz]  不匹配这个集合中的任何一个字符 
[\b]  匹配一个退格符
\b  匹配一个单词的边界 
\B  匹配一个单词的非边界
\cX  这儿，X是一个控制符，/\cM/匹配Ctrl-M 
\d  匹配一个字数字符，/\d/ = /[0-9]/ 
\D  匹配一个非字数字符，/\D/ = /[^0-9]/ 
\n  匹配一个换行符 
\r  匹配一个回车符 
\s  匹配一个空白字符，包括\n,\r,\f,\t,\v等 
\S  匹配一个非空白字符，等于/[^\n\f\r\t\v]/ 
\t  匹配一个制表符 
\v  匹配一个重直制表符 
\w  匹配一个可以组成单词的字符(alphanumeric，这是我的意译，含数字)，包括下划线，如[\w]匹配"$5.98" 中的5，等于[a-zA-Z0-9_] 
\W  匹配一个不可以组成单词的字符，如[\W]匹配"$5.98"中的$，等于[^a-zA-Z0-9]。

说了这么多了，我们来看一些正则表达式的实际应用的例子：
HTML代码的屏蔽
 function mask_HTMLCode(strInput) {
   var myReg = /<(\w+)>/;
   return strInput.replace(myReg, "&lt;$1&gt;");
 }
E-mail地址验证:
 function test_email(strEmail) {
  var myReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;
  if(myReg.test(strEmail)) return true;
  return false;
 }

正则表达式对象的属性及方法：
　　预定义的正则表达式拥有有以下静态属性：input, multiline, lastMatch, lastParen, leftContext,

rightContext和$1到$9。其中input和multiline可以预设置。其他属性的值在执行过exec或test方法后被根据

不同条件赋以不同的值。许多属性同时拥有长和短(perl风格)的两个名字，并且，这两个名字指向同一个值。( JavaScript模拟perl的正则表达式)

正则表达式对象的属性：
属性 含义
$1...$9 如果它(们)存在，是匹配到的子串 
$_ 参见input 
$* 参见multiline 
$& 参见lastMatch 
$+ 参见lastParen 
$` 参见leftContext 
$''　　　　　　　　　 参见rightContext 
constructor　　　  创建一个对象的一个特殊的函数原型 
global　　　　　　  是否在整个串中匹配(bool型) 
ignoreCase　　　　 匹配时是否忽略大小写(bool型) 
input　　　　　　　 被匹配的串 
lastIndex　　　　  最后一次匹配的索引 
lastParen　　　　  最后一个括号括起来的子串 
leftContext　　　  最近一次匹配以左的子串 
multiline　　　　  是否进行多行匹配(bool型) 
prototype　　　　  允许附加属性给对象 
rightContext　　　 最近一次匹配以右的子串 
source　　　　　　  正则表达式模式 
lastIndex　　　　  最后一次匹配的索引 

正则表达式对象的方法：
方法 含义
compile　　　　　  正则表达式比较 
exec　　　　　　　 执行查找 
test　　　　　　　 进行匹配 
toSource　　　　　 返回特定对象的定义(literal

representing)，其值可用来创建一个新的对象。重载Object.toSource方法得到的。 
toString　　　　　 返回特定对象的串。重载Object.toString方法得到的。 
valueOf　　　　　  返回特定对象的原始值。重载Object.valueOf方法得到
 

例子：
<script language = "JavaScript">
var myReg = /(w+)s(w+)/;
var str  = "John Smith";
var newstr = str.replace(myReg, "$2, $1");
document.write(newstr);
</script>
将输出"Smith, John"

1 var  e_onLoad  =  window.onload;
2 window.onload  =   function () {
3      // your code
4      if (e_onLoad) e_onLoad();
5      // your code
6 }
7

以上代码即可根据需要在别人的onLoad()事件之前或之后执行自己的代码!