Jquery Tableの基本操作

出典:http://www.cnblogs.com/lxblog/archive/2013/01/11/2856582.html
query操作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)表の2行目を削除するなど、行を削除します.

//     （   ）
 $("#table3 tr:gt(0):eq(1)").remove();

(2)表の2番目の列を削除するなど、列を削除します.

//eq:         0   ，     $("#table3 tr th:eq(1)").remove();//nth-child:       1   $("#table3 tr td:nth-child(2)").remove();

(3)2行目以外のすべての行を削除する.

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

(4)2列目以外のすべての列を削除する.

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

(5)2行目を隠すなど、行を隠す:

 $("#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)2番目の列を非表示にするなど、列を非表示にします.

 $("#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)行を挿入し、2行目以降に挿入する.

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)2行目、3列目など、セルの値を取得します.

var v = $("#table3 tr:gt(0):eq(1) td:eq(2)").text();//    ：      

(10)2番目の列など、1つの列のすべての値を取得します.

var v = "";
 $("#table3 tr td:nth-child(2)").each(function () {
        v += $(this).text()+" ";
});//  ：                      

(11)2行目など、1行のすべての値を取得します.

 var v = "";
 $("#table3 tr:gt(0):eq(1) td").each(function () {
        v += $(this).text() + " ";
 });//  ：                                      

(12)連結行のセル(2行目と3行目のセルの連結など)

$("#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)2番目のセルと3番目のセルを結合するなど、列のセルを結合する

$("#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) + " ");
    })
});

--=ソースダウンロード=--