Summary of various examples of how jquery operates tables-JS Tutorial-php.cn

This article summarizes the techniques for operating Table with jQuery. Share it with everyone for your reference, the details are as follows:

1. The row changes color when the mouse moves

Method 1: hover(fun(), fun in jQuery ()) method, parameter one: the 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") })

Copy after login

Method two:

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

Copy after login

2. Different colors for odd and even rows

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

Copy after login

3.Hide one row

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

Copy after login

4. Hide a column

Method one:

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

Copy after login

Method two:

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

Copy after login

5 .Delete a row

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

Copy after login

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();

Copy after login

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();

Copy after login

8. Insert a row:

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

Copy after login

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(',');

Copy after login

10. Select all or Uncheck all

//方法一： //全选或全不选 此传入的参数为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;i
        
         Copy after login

11. The client dynamically adds and deletes rows

function btnAddRow() { //行号是从0开始，最后一行是新增、删除、保存按钮行 故减去2 var rownum=$("#table1 tr").length-2; var chk=""; var text=""; var sel=""; var row=""+chk+""+text+""+sel+""+text+""+text+""; $(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()); } }); }

Copy after login

      姓名  性别  密码  地址  
     张三  男  zhangsan  上海  
     李四  男  lisi  安庆  
     王五  男  beijing  北京  
     无名氏  女  wumingshi  上海  
     赵老师  男  zhaolaoshi  浙江

姓名	性别	密码	地址
张三	男	zhangsan	上海
李四	男	lisi	安庆
王五	男	beijing	北京
无名氏	女	wumingshi	上海
赵老师	男	zhaolaoshi	浙江

Copy after login

The above is the detailed content of Summary of various examples of how jquery operates tables. For more information, please follow other related articles on the PHP Chinese website!