byterat

當談到表格數據的設計時，沒有太多的網頁設計師會有太大的興趣。今天我們已經收集了20多個功能超大且看上去挺漂亮的Ajax/CSS表格設計，并且教你一些表格設計中所運用的技巧，例如表格數據的排序和過濾等。

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表格，歡迎在此留言。

/**
 * 加碼解碼工具
 * @author lwm
 *
 */

public class Encode {
 
 /*
  * 對應javascript的escape()函數, 加碼后的串可直接使用javascript的unescape()進行解碼
  */
 public static String escape(String src) {
  int i;
  char j;
  StringBuffer tmp = new StringBuffer();
  tmp.ensureCapacity(src.length() * 6);
  for (i = 0; i < src.length(); i++) {
   j = src.charAt(i);
   if (Character.isDigit(j) || Character.isLowerCase(j)
     || Character.isUpperCase(j))
    tmp.append(j);
   else if (j < 256) {
    tmp.append("%");
    if (j < 16)
     tmp.append("0");
    tmp.append(Integer.toString(j, 16));
   } else {
    tmp.append("%u");
    tmp.append(Integer.toString(j, 16));
   }
  }
  return tmp.toString();
 }

 /*
  * 對應javascript的unescape()函數, 可對javascript的escape()進行解碼
  */
 public static String unescape(String src) {
  StringBuffer tmp = new StringBuffer();
  tmp.ensureCapacity(src.length());
  int lastPos = 0, pos = 0;
  char ch;
  while (lastPos < src.length()) {
   pos = src.indexOf("%", lastPos);
   if (pos == lastPos) {
    if (src.charAt(pos + 1) == 'u') {
     ch = (char) Integer.parseInt(src
       .substring(pos + 2, pos + 6), 16);
     tmp.append(ch);
     lastPos = pos + 6;
    } else {
     ch = (char) Integer.parseInt(src
       .substring(pos + 1, pos + 3), 16);
     tmp.append(ch);
     lastPos = pos + 3;
    }
   } else {
    if (pos == -1) {
     tmp.append(src.substring(lastPos));
     lastPos = src.length();
    } else {
     tmp.append(src.substring(lastPos, pos));
     lastPos = pos;
    }
   }
  }
  return tmp.toString();
 }

}

讀 YUI ，EXT等源碼的時候看JS天旋地轉，那可不是51JS上那種挪挪位置就能理解的，此刻如果沒有JavaScrip的基礎，更是像沒有星光的黑夜…….

自以為覺得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());