2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

1.鼠標(biāo)移動(dòng)行變色


方法一：jQuery中的hover(fun(),fun())方法，參數(shù)一：第一個(gè)方法是添加樣式功能，參數(shù)二：第二個(gè)方法是取消樣式功能

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

?

?方法二：

$("#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.隱藏一列


方法一：

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

?

方法二：

[html]? view plain copy $("#table1?tr").each(function(){$("td:eq(3)",this).hide()}); ??

?

5.刪除一行

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

?

6.刪除一列

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

?

7.得到（設(shè)置）某個(gè)單元格的值

//設(shè)置table1,第2個(gè)tr的第一個(gè)td的值。??? $("#table1?tr:eq(1)?td:nth-child(1)").html("value");??? //獲取table1,第2個(gè)tr的第一個(gè)td的值。??? $("#table1?tr:eq(1)?td:nth-child(1)").html(); ?

?

8.插入一行：

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

?

9、獲取每一行指定的單元格的值

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

?

10、全選或全不選

//方法一：?? //全選或全不選?此傳入的參數(shù)為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<trlist.length;i++)?? {?? var?tr=$(trlist[i]);?? var?input=tr.find("INPUT[type='checkbox']");?? input.attr("checked",chall.checked);?? }?? }?? //方法二：?? //全選或全不選?此傳入的參數(shù)為this?如：checkAll(this)?? function?checkAll(evt)?? {?? var?tbl=$("#table1");?? var?trlist=tbl.find("tr");?? for(var?i=1;i<trlist.length;i++)?? {?? var?tr=$(trlist[i]);?? var?input=tr.find("INPUT[type='checkbox']");?? input.attr("checked",evt.checked);?? }?? }?? //方法三：?? //全選或全不選?此傳入的參數(shù)為this?如：checkAll(this)?? function?checkAll(evt)?? {?? $("#table1?tr").find("input[type='checkbox']").each(function(i){?? $(this).attr("checked",evt.checked)?? });?? }?? //方法四：?? //全選或全不選?此傳入的參數(shù)為this?如：checkAll(this)?? function?checkAll(evt)?? {?? $("#table1?tr").find("input[type='checkbox']").attr("checked",evt.checked);?? } ?

11、客戶端動(dòng)態(tài)添加行、刪除行

function?btnAddRow()?? {?? //行號(hào)是從0開(kāi)始，最后一行是新增、刪除、保存按鈕行?故減去2?? var?rownum=$("#table1?tr").length-2;?? var?chk="<input?type='checkbox'?id='chk_"+rownum+"'?name='chk_"+rownum+"'/>";?? var?text="<input?type='text'?id='txt_"+rownum+"'?name='txt_"+rownum+"'?width='75px'/>";?? var?sel="<select?id='sel_"+rownum+"'><option?value='1'>男</option><option?value='0'>女</option></select>";?? var?row="<tr><td>"+chk+"</td><td>"+text+"</td><td>"+sel+"</td><td>"+text+"</td><td>"+text+"</td></tr>";?? $(row).insertAfter($("#table1?tr:eq("+rownum+")"));??? }?? //客戶端刪除一行?? //每次只能刪除一行，刪除多行時(shí)出錯(cuò)?? function?btnDeleteRow()?? {?? $("#table1?tr").find("input[type='checkbox']").each(function(i){?? if($(this).attr("checked"))?? {??? if(i!=0)//不能刪除行標(biāo)題?? {?? $("#table1?tr:eq("+i+")").remove();?? }?? }?? });?? }?? //這個(gè)比上面的要好，可以一下刪除多個(gè)記錄?? function?btnDeleteRow()?? {?? $("#table1?tr").each(function(i){?? var?chk=$(this).find("input[type='checkbox']");?? if(chk.attr("id")!="checkall")//不能刪除標(biāo)題行?? {?? if(chk.attr("checked"))?? {?? $(this).remove();?? }?? }?? });?? } ? //客戶端保存?? function?btnSaveClick()?? {?? //find()方法中我暫時(shí)不知道如何設(shè)定多個(gè)篩選條件，所以下面得不到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());?? }?? });?? }

轉(zhuǎn)載于:https://my.oschina.net/u/734885/blog/390835

總結(jié)

以上是生活随笔為你收集整理的汇总常用的jQuery操作Table tr td方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。