jQuery操作表格table程式碼例項

表格雖然在佈局中不受歡迎，但在表單佈局，資料組織中還是比較方便，相比div+css佈局更推薦使用table+css。下面就介紹一下如何使用jQuery操作表格。

程式碼示例如下:

一.要操作的table程式碼:

[HTML] 純文字檢視 複製程式碼
<table id="thetable">
  <tr>
    <th>文章標題</th>
    <th>文章分類</th>
    <th>釋出時間</th>
    <th>操作</th>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
</table>

二.jQuery操作程式碼:

1.滑鼠懸浮行變色

[JavaScript] 純文字檢視 複製程式碼
$("#thetable tr").hover(function(){ 
   $(this).children("td").addClass("hover") 
},function(){ 
   $(this).children("td").removeClass("hover") 
})

以上程式碼能夠實現當滑鼠懸浮在單元格上的時候新增樣式類hover，離開的時候再移除。

2.隔行變色:

[JavaScript] 純文字檢視 複製程式碼
$("#thetable tr:odd").css("background-color", "#bbf");

索引奇數行背景變色。

[JavaScript] 純文字檢視 複製程式碼
$("#thetable tr:even").css("background-color","#ffc");

索引偶數行背景變色。

3.隱藏指定的行:

[JavaScript] 純文字檢視 複製程式碼
$("#thetable tr:eq(3)").hide()

以上程式碼可以隱藏表格的第三行。

4.隱藏指定的列:

[JavaScript] 純文字檢視 複製程式碼
$("#thetable tr td::nth-child(3)").hide();

以上程式碼可以將每一行的第三個單元格隱藏，也就是將第三列隱藏。

[JavaScript] 純文字檢視 複製程式碼
$("#thetable tr").each(function(){$("td:eq(2)",this).hide()});

以上程式碼同樣可以實現隱藏第三列的功能。

5.刪除行:

[JavaScript] 純文字檢視 複製程式碼
$("#thetable tr).remove();

以上程式碼可以刪除表格中所有的行。

[JavaScript] 純文字檢視 複製程式碼
$("#thetable tr:not(:first)").remove();

以上程式碼可以刪除除去第一行以外所有的行。

[JavaScript] 純文字檢視 複製程式碼
$("#thetable tr td:not(:nth-child(1))").remove();

以上程式碼同樣可以刪除除去第一行以外的所有的行。

6.設定單元格的值:

[JavaScript] 純文字檢視 複製程式碼
$("#thetable tr:eq(1) td:nth-child(1)").html("value");

以上程式碼可以設定第二行的第一個單元格的值。

相關閱讀:

1.hover事件可以參閱jQuery hover事件一章節。

2.children()可以參閱jQuery children()一章節。

3.addClass()可以參閱jQuery addClass()一章節。

4.removeClass()可以參閱jQuery removeClass()一章節。

5.CSS()可以參閱jQuery css()一章節。

6.: odd選擇器可以參閱jQuery :odd一章節。

7.:even選擇器可以參閱jQuery :even一章節。

8.:eq選擇器可以參閱jQuery :eq()一章節。

9.::nth-child選擇器可以參閱jQuery :nth-child一章節。

10.each()函式可以參閱jQuery each()一章節。

11.:not選擇器可以參閱jQuery :not()一章節。

12.remove()可以參閱jQuery remove()一章節。