Jquery Table 的基本操作

標籤：ast   ide   targe   title   20px   lsp   背景色   addclass   span   

Jquery 操作 Html Table 是很方便的，這裡對錶格的基本操作進行一下簡單的總結。

首先建立一個通用的表格css 和一個 表格Table：

table{    border-collapse: collapse;    border-spacing: 0;    margin-right: auto;    margin-left: auto;    width: 800px; } th, td {    border: 1px solid #b5d6e6;    font-size: 12px;    font-weight: normal;    text-align: center;    vertical-align: middle;    height: 20px; } th {    background-color: Gray; }   

<table>        <tr>            <th style="width: 160px;">表頭一</th>            <th style="width: 160px;">表頭二 </th>            <th style="width: 160px;">表頭三</th>            <th style="width: 160px;">表頭四</th>            <th style="width: 160px;">表頭五</th>        </tr>        <tr>            <td>第一行第一列</td>            <td>第一行第二列</td>            <td>第一行第三列</td>            <td>第一行第四列</td>            <td>第一行第五列</td>        </tr>        <tr>            <td>第二行第一列</td>            <td>第二行第二列</td>            <td>第二行第三列</td>            <td>第二行第四列</td>            <td>第二行第五列</td>        </tr>        <tr>            <td>第三行第一列</td>            <td>第三行第二列</td>            <td>第三行第三列</td>            <td>第三行第四列</td>            <td>第三行第五列</td>        </tr>        <tr>            <td>第四行第一列</td>            <td>第四行第二列</td>            <td>第四行第三列</td>            <td>第四行第四列</td>            <td>第四行第五列</td>        </tr></table>

一、滑鼠移動到行更換背景色：

增加一個css樣式：

.hover{  background-color: #cccc00;}

Js指令碼：

$(document).ready(function () {    //滑鼠移動到行變色,單獨建立css類hover    //tr:gt(0):表示擷取大於 tr index 為0 的所有tr，即不包括表頭    $("#table1 tr:gt(0)").hover(    function () { $(this).addClass("hover") },    function () { $(this).removeClass("hover") })});

 結果執行結果：

二、 表格奇偶行變色 ：

奇數行和偶數行css：

.odd{ background-color: #bbf;}.even{ background-color:#ffc; }

 Js指令碼：

$(document).ready(function () {    //奇偶行不同顏色    $("#table2 tbody tr:odd").addClass("odd"),    $("#table2 tbody tr:even").addClass("even")    //或者    //$("#table2 tbody tr:odd").css("background-color", "#bbf"),    //$("#table2 tbody tr:even").css("background-color", "#ffc")});

 結果顯示：

 

三、基本操作：

(1)刪除行，比如刪除表格中的第二行：

//刪除指定行（第二行） $("#table3 tr:gt(0):eq(1)").remove();

 (2)刪除列，比如刪除表格中的第二列：

//eq:擷取子項目索引從 0 開始，先刪除表頭$("#table3 tr th:eq(1)").remove();//nth-child:擷取子項目從 1 開始$("#table3 tr td:nth-child(2)").remove();

 (3)刪除其它行，比如第二行之外的所有行：

 $("#table3 tr:gt(0):not(:eq(1))").remove();

 (4)刪除其它列，比如第二列之外的所有列：

//先刪除表頭$("#table3 tr th:not(:eq(1))").remove();$("#table3 tr td:not(:nth-child(2))").remove();

 (5)隱藏行，比如隱藏第二行：

 $("#table3 tr:gt(0):eq(1)").hide();//或者//$("#table3 tr:gt(0):eq(1)").css("display", "none")//顯示//$("#table3 tr:gt(0):eq(1)").css("display", "");

 (6)隱藏列，比如隱藏第二列：

 $("#table3 tr th:eq(1)").hide(); $("#table3 tr td:nth-child(2)").hide();//或者//$("#table3 tr th:eq(1)").css("display", "none");//$("#table3 tr td:nth-child(2)").css("display", "none");//顯示//$("#table3 tr th:eq(1)").css("display", "");//$("#table3 tr td:nth-child(2)").css("display", "");

(7)插入新行，在表格最後的位置：

var newRow = "<tr style=\"background:red;\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";$("#table3 tr:last").after(newRow);

(8)插入行，在第二行之後插入：

var newRow = "<tr style=\"background:red;\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";$("#table3 tr:gt(0):eq(1)").after(newRow);

 (9)獲得儲存格的值，比如第二行第三列：

var v = $("#table3 tr:gt(0):eq(1) td:eq(2)").text();//結果顯示：第二行第三列

(10)擷取一列的所有值，比如第二列：

var v = ""; $("#table3 tr td:nth-child(2)").each(function () {        v += $(this).text()+" ";});//結果：第一行第二列  第二行第二列  第三行第二列  

(11)擷取一行的所有值，比如第二行：

 var v = ""; $("#table3 tr:gt(0):eq(1) td").each(function () {        v += $(this).text() + " "; });//結果：第二行第一列  第二行第二列  第二行第三列  第二行第四列  第二行第五列 

(12)合并行儲存格 比如合并 第二行第二個和第三個儲存格：

$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("colspan", 2);$("#table3 tr:gt(0):eq(1) td:eq(2)").remove();

(13)拆分行儲存格將上面合并的儲存格還原：

//注意不能使用//$("#table3 tr:gt(0):eq(1) td:eq(1)").removeAttr("colspan"); $("#table3 tr:gt(0):eq(1) td:eq(1)").attr("colspan", 1); $("#table3 tr:gt(0):eq(1) td:eq(1)").after("<td>第二行第三列</td>")

(14)合并列儲存格，比如合并第二列第二個儲存格和第三個儲存格

$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("rowspan", 2);$("#table3 tr:gt(0):eq(2) td:eq(1)").remove();

(15)拆分列儲存格，比如將上面剛合并的儲存格還原：

 $("#table3 tr:gt(0):eq(1) td:eq(1)").attr("rowspan", 1);//在下面行第一個儲存格後插入儲存格 $("#table3 tr:gt(0):eq(2) td:eq(0)").after("<td>第三行第二列</td>");

(16)為每個儲存格增加點擊事件，並彈出該儲存格行索引和列索引：

$(document).ready(function () {    //點擊#table3 的儲存格返回 儲存格索引    $("#table3 td").click(function () {        var tdSeq = $(this).parent().find("td").index($(this));        var trSeq = $(this).parent().parent().find("tr").index($(this).parent());        alert("第" + (trSeq) + "行，第" + (tdSeq+1) + "列");    })});

--= 源 碼 下 載 =--

Jquery Table 的基本操作