Summary of jQuery operation Table methods

This time I will bring you a summary of the jQuery operation table method. What are the precautions for jQuery operation table. The following is a practical case, let's take a look.

1. The row changes color when the mouse moves

Method 1: hover(fun(), fun()) method in jQuery, parameter 1: first method Is to add the style function, parameter two: The second method is to cancel the style function

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

Method two:

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

2. Odd and even rows have different colors

$("#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.Hide a row

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

4.Hide a column

Method 1:

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

Method 2:

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

5. Delete a row

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

#6. Delete a column

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

7. Get (set) the value of a certain cell

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

8. Insert a row:

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

9, Get the value of the specified cell in each row

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

10. Select all or none

//方法一：
//全选或全不选 此传入的参数为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;id7031c1db9094ee4541ac8b4db88137f";
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());
}
});
}

46d5fe1c7617e3914f214aaf043f4ccf
.hover
{
  background-color:red;
}
531ac245ce3e4fe3d50054a55f265927
23fe0263b682d11b6362f7fdc28ca899
a34de1251f0d9fe1e645927f19a896e8
b4d429308760b6c2d20d6300079ed38e
49ccdbc9f3ee0ff64f125f7048b1013e
01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e姓名01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e性别01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e密码01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e地址01c3ce868d2b3d9bce8da5c1b7e41e5b
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c
36db48e7b0e50b08f213c41a030d94b4
b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c张三b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c男b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1czhangsanb90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c上海b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c
2e6cd4897d4afca4f7438be274076cf6
b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c李四b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c男b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1clisib90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c安庆b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c
57aa45e773995a8e992982069ac5a8e6
b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c王五b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c男b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1cbeijingb90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c北京b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c
cb156e62e5bb9a6cb22524d4b6241bf1
b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c无名氏b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c女b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1cwumingshib90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c上海b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c
2559f9a95ac0befe6e3d6524e2c16d4c
b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c赵老师b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c男b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1czhaolaoshib90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c浙江b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
e77292f32b245f9a9aba5a990432da2e
669c4eb54fb78d1b3d4aa7a1c658e5fc
ff07c8a390de24e525254ac6b7c0d999
db3b1f4cf55b52b93946e09641b0d544
b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Jquery operation object array element method summary (with case)

grep() method to implement array Filter Filter

The above is the detailed content of Summary of jQuery operation Table methods. For more information, please follow other related articles on the PHP Chinese website!