爲表格中的行添加懸停效果：
在表格的使用中，我們可以爲表格中的行添加懸停效果，讓表格對用戶的鼠標懸停動作做出反應以方便用戶閱讀。下面的例子中，當用戶把鼠標放到表格中任意一行時，我們通過爲當前行設置另一種背景色輕鬆的實現了這個效果。HTML代碼如下：
（1）、在document的ready事件處理函數中，爲每個tr元素綁定hover事件。這個選擇器的好處是它會自動選取表格中的所有行，然後用寥寥幾行的代碼爲它們綁定hover事件處理函數。
$(document).ready(function(){
$('tr').hover(function(){
},function(){
});
});
(2)、往hover事件處理函數中添加兩條語句，一條加到mouseenter事件中，一條加到mouseleave事件中。使用this關鍵字引用觸發事件所在的當前tr元素，在mouseenter事件中將行的背景色設置成粉紅色，在mouseleave事件中把行的背景色變回白色。
$(document).ready(function(){
$('tr').hover(function(){
$(this).css('background','pink');
},function(){
$(this).css('background','white');
});
});
網頁效果如圖所示：
爲表格中的行添加高級懸停效果：
有時候當用戶在某行上懸停時顯示編輯選項，這種用戶頁面的解決方案經常用於即時修改數據的場合。想要達到這種效果，首先在document的ready事件處理函數中爲所有的tr元素綁定hover事件。像上面的例子一樣添加兩條選擇器語句。在mouseenter事件中，使用this關鍵字選中當前元素，接着用append方法在dom中插入一個a標籤。當用戶在某一行上懸停時，第一條語句爲該行的每一列追加Edit Me鏈接，第二條語句在鼠標離開時將這些追加元素移除。
$(document).ready(function(){
$('tr').hover(function(){
$(this).children().append('<div class="editme"><a href=" ">Edit Me</a></div>;
},function(){
$('.editme').remove();
});
});
維護表格數據：
這裏說的維護是指添加、刪除和過濾表格數據，這些行爲都會改變DOM。在這裏主要實現的效果有：
1、在表格中的第一行或最後一行插入一行
2、基於行號（索引）在具體某一行之後添加一行
3、在特定內容行之後增加一行
4、使用過濾器選擇器刪除一行
5、基於行號（索引）刪除一行
6、刪除具有特定內容的行
1、在表格第一行或最後一行之後增加一行：
（1）、新建一個special類，爲它設置一下樣式，這樣在把它添加到表格之後便能突出顯示。
.special{background:#6AAF18;text-align:center;font-size:22px;color:#fff;font-weight:bold;}
(2)、在document的ready事件處理函數中添加一行語句，選中第一個tr，然後使用。after（）方法在該行之後插入今日特價信息。
$(document).ready(function(){
$('products tr:first').after('<tr><td colspan="4" class = "special">Special Offer TODAY</td></tr>');
});
還有一種可選方案，即使用：last過濾器在表格的最後一行之後展示特定內容，方法類似。
2、使用過濾器選擇器刪除一行
在操作表格的過程中經常遇到需要刪除內容的時候，在刪除某個產品、圖片、文本或者DOM中的某類元素時，可以使用jQuery的.remove（）方法，它負責從DOM中刪除匹配選擇器的元素。
在document的ready事件處理函數中，使用選擇器選中元素，然後調用.remove()方法。這裏刪除表格中的最後一行，代碼如下：
$(document).ready(function(){
$('tr:last').remove();
});
3、基於索引在某一行之後增加一行
正如可以基於表格行的位置找出首行和末行，也一樣可以基於行號（索引）找出具體某一行，然後在它的前面或後面插入一行。在選擇器中使用:eq（索引值)【:eq（）是一個基於索引的過濾器，根據索引定位元素。】過濾器可以找出索引值中的所有元素。比如下面的代碼，可以找出索引值爲5的所有元素，並在這些元素的後面插入Special Offer TODAY。
$("tr:eq(5)").after('<tr><td colspan="4">Special Offer TODAY</td></tr>');
4、基於索引刪除某行
類似於基於索引添加行。在DOM選中索引值的所有元素，然後調用remove方法刪除它們。如刪除索引值爲1的所有元素：
$("tr:eq(1)").remove();
5、包含特定內容的行之後追加信息
如果需要在包含特定內容的行之前或之後插入一行，可以使用:contains過濾器。注意：:contains過濾器區分大小寫。如果目標字符串都是小寫，指定時卻用了大寫的過濾字符，就不會發生任何匹配。
如想要在包含clothing的行中添加一行，代碼如下：
$('tr':contains("clothing")').after('<tr><td colspan="4" class="special">Special Offer TODAY</td></tr>');
6、基於元素內容刪除一行
還是上面的例子，選中包含clothing的字符串的所有tr元素，然後將它們從DOM中移除：
$('tr').remove(":contains('clothing')");
使用jQuery設置表格分頁：
分頁是按照頁面大小將內容分成相應大小的片段。利用分頁技術每次可只呈現少數結果，便於用戶導航和理解。
（1）、在創建分頁腳本之前，先準備一些分頁需要的數據。這裏使用表格。代碼如下：
<div class="container">
<table border="0" cellpadding="0" cellspacing="0">
<tr><th>Item #</th> <th>Category</th> <th>Product</th> <th>Price</th> <th>Status</th></tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" id="data">
<tr><td>1</td> <td>Clothing</td> <td>North Face Jacket</td> <td>$189.99</td> <td>In-stock</td></tr>
<tr><td>2</td> <td>Shoes</td> <td>Nike</td> <td>$59.99</td> <td>In-stock</td></tr>
<tr><td>3</td> <td>Electronics</td> <td>LED TV</td> <td>$589.99</td> <td>Out of stock</td></tr>
<tr><td>4</td> <td>Sporting Goods</td> <td>Ping Golf Clubs</td> <td>$159.99</td> <td>In-stock</td> </tr>
<tr><td>5</td> <td>Clothing</td> <td>Sweater</td> <td>$19.99</td> <td>In-stock</td></tr>
<tr><td>6</td> <td>Clothing</td> <td>North Face Jacket</td> <td>$189.99</td> <td>In-stock</td></tr>
<tr><td>7</td> <td>Shoes</td> <td>Nike</td> <td>$59.99</td> <td>In-stock</td></tr>
<tr><td>8</td> <td>Electronics</td> <td>LED TV</td> <td>$589.99</td> <td>Out of stock</td></tr>
<tr><td>9</td> <td>Sporting Goods</td> <td>Ping Golf Clubs</td> <td>$159.99</td> <td>In-stock</td></tr>
<tr><td>10</td> <td>Shoes</td> <td>Nike</td> <td>$59.99</td> <td>In-stock</td></tr>
<tr><td>11</td> <td>Electronics</td> <td>LED TV</td> <td>$589.99</td> <td>Out of stock</td></tr>
<tr><td>12</td> <td>Sporting Goods</td> <td>Ping Golf Clubs</td> <td>$159.99</td> <td>In-stock</td></tr>
<tr><td>13</td> <td>Electronics</td> <td>LED TV</td> <td>$589.99</td> <td>Out of stock</td></tr>
<tr><td>14</td> <td>Sporting Goods</td> <td>Ping Golf Clubs</td> <td>$159.99</td> <td>In-stock</td></tr>
</table>
</div>
（2）、利用表格中的ID #data選取這個表格，然後在它之後插入一個DIV#nav，使其顯示在表格下方。這個DIV的元素用來存放頁碼鏈接。
$('#data').after('div id="nav"></div>');
（3）、創建變量rowsShown，存放每頁展示行數
var rowsShown = 4;
（4）、創建變量rowsTotal，獲取分頁數據的總行數，並將它保存於變量rowsTotal中。在本例中，先匹配#data tr，然後取結果集對象的length屬性，值爲14.
var rowsTotal = $('#data tr').length;
（5）、創建變量numpages，它的值爲rowsTotal除以rowsShown。運算結果用Math.ceil這個原生方法進行處理。
var numPages = Math.ceil(rowsTotal/rowsShown);
（6）、接下來創建一個for循環，迭代生成用來導航的頁碼鏈接。創建變量pageNum，它的值爲循環變量i+1，這就保證了頁碼是從1而不是0開始。頁碼鏈接有一個rel屬性，它的值即鏈接的序號，鏈接文本則設置成pageNum的值
for(i=o;i<numPages;i++){
var pageNum = i+1;
$('#nav').append('<a href= "#" rel=" 'i+1'">'+pageNum+'</a>');
}
（7）、添加一條語句隱藏表格#data中所有的行
$('#data tr').hide();
（8）、選取表格的第一行並將它顯示出來。
$('#data tr:first').show();
（9）、添加一條語句選取表格#data中的所有行，然後使用jQuery的slice（）方法確保只顯示前4行。.slice()方法接受兩個參數，一邊截取數組的一部分。
$('data tr').slice(0,rowsShown).show();
（10）、增加一條語句，選中第一個頁碼鏈接，然後爲其添加active類。這就保證了頁面載入完成後第一個頁碼處於突出顯示狀態。
$('#nav a:first').addClass('active');
（11）、爲導航元素#nav內所有鏈接綁定click事件處理函數。這個函數控制分頁，它是這個腳本的核心部分。
$('#nav a').bind('click',function(){
});
（12）、click事件處理函數的第一條語句，移除所有頁碼鏈接的active類
$('#nav a').bind('click',function(){
$('#nav a').removeClass('active');
});
（13）、然後爲當前被單擊的頁號鏈接添加類
$('#nav a').bind('click',function(){
$('#nav a').removeClass('active');
$(this),addClass('active');
});
（14）、新建變量currPage，保存當前鏈接的rel屬性值（這個值是在前面的for循環中設置的）
$('#nav a').bind('click',function(){
$('#nav a').removeClass('active');
$(this),addClass('active');
var currPage= $(this).attr('rel');
});
（15）、再建一個變量startItem和endItem，它們的值分別是currPage和rowsShown的乘積和startItem和rowsShown的和
$('#nav a').bind('click',function(){
$('#nav a').removeClass('active');
$(this),addClass('active');
var currPage= $(this).attr('rel');
var startItem = currPage *rowsShown;
var endItem = startItem +rowsShown;
});
（16）、click事件處理函數中的最後一條語句控制單擊頁碼之後顯示哪些記錄。使用選擇器選取了表格#data的所有行。
$('#nav a').bind('click',function(){
$('#nav a').removeClass('active');
$(this),addClass('active');
var currPage= $(this).attr('rel');
var startItem = currPage *rowsShown;
var endItem = startItem +rowsShown;
$('#data tr').css('opacity','0.0').hide().slice(startItem,endItem).css('display','table-row').animate({opacity:1},300);
});
本例的最後效果圖如下：
