2019獨角獸企業重金招聘Python工程師標準>>>

1.鼠標移動行變色


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

$("#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.得到（設置）某個單元格的值

//設置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.插入一行：

<strong>//在第二個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、全選或全不選

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

11、客戶端動態添加行、刪除行

function?btnAddRow()?? {?? //行號是從0開始，最后一行是新增、刪除、保存按鈕行?故減去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+")"));??? }?? //客戶端刪除一行?? //每次只能刪除一行，刪除多行時出錯?? 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());?? }?? });?? }

轉載于:https://my.oschina.net/u/734885/blog/390835

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。