Detaillierte Erläuterung der Schritte zum Betreiben einer Tabelle mit JQuery

Dieses Mal werde ich Ihnen die Schritte zum Betrieb einer Tabelle mit jquery ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für den Betrieb einer Tabelle mit jquery? Hier sind konkrete Fälle.

Obwohl p+CSS mittlerweile für das Seitenlayout beliebt ist, bietet die Verwendung von Tabellen an vielen Stellen immer noch viele Vorteile. Es ist bequemer, Tabellen zum Anzeigen von Daten zu verwenden. Im Folgenden finden Sie eine Zusammenfassung der häufig verwendeten Methoden Merken Sie sich diese Bedienkenntnisse auswendig, wenn Sie sie das nächste Mal verwenden, und verbessern Sie die Entwicklungseffizienz.

Die folgenden sind die häufig verwendeten Funktionen von jQuery-Tabellenoperationen:

1. Mausbewegung Reihen ändern ihre Farbe

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

Methode 2:

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

2. Verschiedene Farben für ungerade und gerade Reihen

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

3. Eine Zeile ausblenden

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

4. Eine Spalte ausblenden

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

5. Löschen Sieeine Zeile

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

6. Löschen Sie eine Spalte

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

Erhalten (setzen) Sie den Wert einer bestimmten Zelle

// 设置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. Fügen Sie eine Zeile ein

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

9. Rufen Sie den Wert der angegebenen Zelle in jeder Zeile ab

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

10. Alle oder keine auswählen

//方法零：
$('#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<trlist.length;i++){
  var tr=$(trlist[i]);
  var input=tr.find("INPUT[type=&#39;checkbox&#39;]");
  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=&#39;checkbox&#39;]");
  input.attr("checked",evt.checked);
 }
}
//方法三：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt){
    $("#table1 tr").find("input[type=&#39;checkbox&#39;]").each(function(i){
     $(this).attr("checked",evt.checked)
    });
}
//方法四：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt){
    $("#table1 tr").find("input[type=&#39;checkbox&#39;]").attr("checked",evt.checked);
}

Der Client fügt dynamisch eine Zeile hinzu

function btnAddRow(){
    //行号是从0开始，最后一行是新增、删除、保存按钮行 故减去2
    var rownum=$("#table1 tr").length-2;
        var chk="<input type=&#39;checkbox&#39; id=&#39;chk_"+rownum+"&#39; name=&#39;chk_"+rownum+"&#39;/>";
    var text="<input type=&#39;text&#39; id=&#39;txt_"+rownum+"&#39; name=&#39;txt_"+rownum+"&#39; width=&#39;75px&#39;/>";
    var sel="<select id=&#39;sel_"+rownum+"&#39;><option value=&#39;1&#39;>男</option><option value=&#39;0&#39;>女</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+")"));   
}

Der Client löscht eine Zeile

每次只能删除一行，删除多行时出错
function btn
Delete
Row(){
   $("#table1 tr").find("input[type='checkbox']").each(function(i){
    if($(this).attr("checked")){ 
     if(i!=0){//不能删除行标题       
     $("#table1 tr:eq("+i+")").remove();
     }
    }
   });
}

Das ist besser als oben und kann auf einmal gelöscht werden. Mehrere Datensätze

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

13. Kundenspeicherung

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

jquery wechselt Zeilen, um Stile zu Tabellen hinzuzufügen

JS-Methode zum Konvertieren von XML und JSON ineinander

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Betreiben einer Tabelle mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!