jquery によるテーブルの操作方法のさまざまな例のまとめ

この記事ではjQueryでTableを操作するテクニックをまとめました。参考のために皆さんと共有してください。詳細は次のとおりです:

1. マウスが移動すると行の色が変わります

方法 1: jQuery の hover(fun(), fun()) メソッド、パラメーター 1 : 最初の方法は、スタイル関数の追加、パラメーター 2 です。 2 番目の方法は、スタイル関数をキャンセルすることです

$("#table1 tr").hover(function(){
$(this).children("td").addClass("hover")
},function(){
$(this).children("td").removeClass("hover")
})

方法 2: 奇数行と偶数行の色が異なります

$("#table1 tr:gt(0)").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover");
});

3. 1 行を非表示にする

方法 1:

$("#table1 tbody tr:odd").css("background-color", "#bbf");
$("#table1 tbody tr:even").css("background-color","#ffc");
$("#table1 tbody tr:odd").addClass("odd")
$("#table1 tbody tr:even").addClass("even")

方法 2:

$("#table1 tbody tr:eq(3)").hide();

5. 行を削除する

6.列を削除します

$("#table1 tr td::nth-child(3)").hide();

7 .特定のセルの値を取得(設定)します

$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});

8. 行を挿入します:

//删除除第一行外的所有行
$("#table1 tr:not(:first)").remove();
//删除指定行
$("#table1 tr:eq(3)").remove();

9。値各行の指定されたセルの

//删除除第一列外的所有列
$("#table1 tr th:not(:nth-child(1))").remove();
$("#table1 tr td:not(:nth-child(1))").remove();
//删除第一列
$("#table1 tr td::nth-child(1)").remove();

10. すべてを選択するか、何も選択しません

//设置table1,第2个tr的第一个td的值。
$("#table1 tr:eq(1) td:nth-child(1)").html("value");
//获取table1,第2个tr的第一个td的值。
$("#table1 tr:eq(1) td:nth-child(1)").html();

11. クライアントが動的に行を追加および削除します

//在第二个tr后插入一行
$("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7 tr:eq(1)"));

りー

以上がjquery によるテーブルの操作方法のさまざまな例のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。