jQueryの操作テーブルメソッドの概要

今回はjQueryのTableの操作方法についてまとめてみました。 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");
});

2. 奇数行と偶数行の色が異なります

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

3. 行を非表示にする

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

4. 列を非表示にする

方法 1:

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

方法 2:

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

5. 列を削除

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

7.ある特定のセル

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

8. 行を挿入します:

//设置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();

9. 各行の指定されたセルの値を取得します

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

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

var arr = [];
$("#table1 tr td:nth-child(1)").each(function (key, value) {
arr.push($(this).html());
});
var result = arr.join(',');

11.クライアントは動的に行を追加し、行を削除します

//方法一：
//全选或全不选 此传入的参数为event 如：checkAll(event)
function checkAll(evt)
{
 evt=evt?evt:window.event;
 var chall=evt.target?evt.target:evt.srcElement;
 var tbl=$("#table1");
 var trlist=tbl.find("tr");
 for(var i=1;i3301e6df805e14305d6e0b03183ddfb1";
var text="495cbffaef69ee8c8599694f57079abb";
var sel="07dd84e2b63e2bf9d1512db3dcd37ce8a97732aa835093708c3240487f4db46b男4afa15d3069109ac30911f04c56f333833b75806bd15fdc75e33f3c4299337a5女4afa15d3069109ac30911f04c56f333818bb6ffaf0152bbe49cd8a3620346341";
var row="a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1c"+chk+"b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c"+text+"b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c"+sel+"b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c"+text+"b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c"+text+"b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5";
$(row).insertAfter($("#table1 tr:eq("+rownum+")"));
}
//客户端删除一行
//每次只能删除一行，删除多行时出错
function btnDeleteRow()
{
$("#table1 tr").find("input[type='checkbox']").each(function(i){
if($(this).attr("checked"))
{
if(i!=0)//不能删除行标题
{
$("#table1 tr:eq("+i+")").remove();
}
}
});
}
//这个比上面的要好，可以一下删除多个记录
function btnDeleteRow()
{
$("#table1 tr").each(function(i){
var chk=$(this).find("input[type='checkbox']");
if(chk.attr("id")!="checkall")//不能删除标题行
{
if(chk.attr("checked"))
{
$(this).remove();
}
}
});
}
//客户端保存
function btnSaveClick()
{
//find()方法中我暂时不知道如何设定多个筛选条件，所以下面得不到select列表的值
//$("#table1 tr td").find("input[type='text']" || "select").each(function(i){
//alert($(this).val());
//});
$("#table1 tr").find("td").each(function(i){
if($(this).find("input[type='text']").length>0)
{
alert($(this).find("input[type='text']").val());
}
else if($(this).find("select").length>0)
{
alert($(this).find("select").val());
}
});
}

この記事の場合の方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

Jquery操作オブジェクトの配列要素メソッドの概要(ケース付き)

grep()メソッドによる配列フィルタリングの実装

以上がjQueryの操作テーブルメソッドの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。