jQuery操作表格（table）的常用方法、技巧總結_jquery

以下列出13個jQuery操作table常用來的功能：

1.滑鼠移動行變色

複製程式碼 程式碼如下:

$('#table1 tr').hover(function(){

    $(this).children('td').addClass('hover')
}, function(){
    $(>}, 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');

//操作class
$("#table1 tbody tr:odd").addClass("odd");
$("#table1 tbody tr:even").addClass 。 > 程式碼如下:


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

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

4.隱藏一列複製程式碼

程式碼如下:

程式碼如下:
$ ('#table1 tr td::nth-child(3)').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.得到（設定）某個單元格的值

複製程式碼

程式碼如下:
// 設定第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.插入一行

複製程式碼

程式碼如下:
// 第二個tr後插入一行
$('插入3插入 插入 插入 ').insertAfter($('#table7 tr:eq( 1)'));

9.取得每一行指定的單元格的值

複製代碼

複製代碼

複製代碼複製代碼

複製代碼


程式碼如下:

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

10.全選或全不選

複製程式碼 程式碼如下:

//方法零：
$('#all').on('click', function () {
    $('input.checkSub').prop('checked', this.checked); // 為目前一起綁定的子選擇加上效果
});

//方法一：
//全選或全不選此傳入的參數為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  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  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=""; ="";
    var sel="男 女";    var row=" " chk " " text " " sel " " text " " text " ";

    $(row).insertAfter($("#table1 tr:eq(" rownum ")"));   }12..>12.. 🎜>

複製程式碼


程式碼如下:


每次只能刪除一行，刪除多行時發生錯誤
function btnDeleteRow(){
   $("#table1 tr").find("input[type='checkbox']").each(function(i){
    if($( this).attr("checked")){
     if(i!=0){//無法刪除行標題      
     $("#table1 tr:ef(" i ;
     }
    }
   });
}
這個比上面的好，可以一下刪除多筆記錄
function btn; tr").each(function(i){
       var chk=$(this).find("input[type='checkbox']");
     attr if(chk.r("id")! ="checkall"){//無法刪除標題行      

     if(chk.attr("checked")){
     $( });}

13.客戶端保存

複製代碼 程式碼如下:

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){
 ='text']").length>0){
          alert($(this).find("input[type='text']").val());
      }elseif($ (this).find("select").length>0)
      {
          alert($(this).find("select").val()));}