jQuery之表常用操作

就table的一些常用操作做了乙個綜合的例子，包括行條紋高亮工具條提示擴充套件摺疊篩選等效果。

效果圖如下：

下面我把我寫的例子拆分解釋一下：

行條紋

js**

var rowindex = 0;

$("tbody tr").each(function(index)

else

}

rowindex++;

)};

這段**(rowindex%4 < 2)是兩行一組交替換色。

如果是三行一組交替換色，就是rowindex%6 < 3,...依次類推。

通常情況下我們用到最多的是隔行換色，比這個兩行一組交替換色要簡單。

jquery提供了方法：

:even ：匹配所有索引值為偶數的元素，從 0 開始計數。例如$("tr:even")；

:odd：匹配所有索引值為奇數的元素，從 0 開始計數。例如$("tr:odd")。

或者用:nth-child(index)：匹配其父元素下的第n個子或奇偶元素，從1開始計數。例如(":nth-child(2)"偶數行)

2.高亮（突出顯示行）

js**

var column = 3;

$("table.striped tbody tr").each(function(index)

else

});

})

});

這段**可以增強**的視覺效果，是基於使用者的互動突出顯示相關的行。

3.工具條提示

js**

var highlighted ="";

//定位工具提示條

var positiontooltip = function(event));

};

//顯示工具提示條

var showtooltip = function(event)

else

//給工具提示條增加內容，

//如果當前tr的樣式是highlight，那麼工具條的內容是：click to un-highlight all topics written by $thistopic;

//如果當前tr的樣式不是highlight，那麼工具條的內容是：click to highlight all topics written by $thistopic.

positiontooltip(event);

};

//隱藏工具提示條

var hidetooltip = function();

儘管行突出效果是一種很有用的特性，但就目前來講，這些特性存在與否對使用者而言並不明顯。儘管我們可以為所有要單擊的標籤新增clickable類，使滑鼠懸停在這些標籤上時，游標變成手的形狀。當使用者仍然無從知曉單擊這個標籤會發生什麼事情。為此，進一步新增與單擊會發生的情況有關的說明是必要的。

4.摺疊和擴充套件

js**

var togglemins = "images/iconopen.gif";

var toggleplus = "images/iconclose.gif";

var $subhead = $("tbody th:first-child");

$subhead.prepend("

$("img",$subhead).addclass("clickable").click(function()

else

});

這裡用了fadein(speed)和fadeout(speed)方法，speed(string,number) :三種預定速度之一的字串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)

當**中以分組的方式包含大量的資料時，如果能都摺疊或者隱藏一部分**的內容，就可以減少頁面滾動，從而方便對**中的所有資料進行更清晰地檢視。

5.篩選(filter by topic列)

js**

$("table.striped").each(function();

$table.find("tbody tr td").filter(":nth-child(" + (column+1) + ")").each(function());

//在樣式為filter-column的div加乙個all按鈕，顯示所有的**行

$("all

").click(function(),function(event)

else

if($("th",this).length == 0)

});

$(this).addclass("active").siblings().removeclass("active");

});

$filters.insertbefore($table);//把樣式為filter-column的div插入到table前

}

});

通過只向使用者顯示匹配給定條件的**行，可以省去使用者不必要的分心。

jQuery之表常用操作

jQuery之表常用操作

jquery常用操作

JQuery常用操作

jQuery之表常用操作

jQuery之表常用操作

jquery常用操作

JQuery常用操作

相關推薦