Zusammenfassung gängiger Methoden und Techniken zum Betreiben von Tabellen mit jQuery

Zusammenfassung gängiger Methoden und Techniken zum Betreiben von Tabellen mit jQuery_jquery

WBOY

Freigeben： 2016-05-16 16:52:24

Original

938 Leute haben es durchsucht

Das Folgende ist eine Liste von 13 Funktionen, die jQuery häufig zum Betreiben von Tabellen verwendet:

1. Die Zeile ändert ihre Farbe, wenn sich die Maus bewegt

Kopieren Sie den Code Der Code ist wie folgt folgt:

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

Methode 2:

Code kopieren Der Code lautet wie folgt:

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

Kopieren Sie den Code Der Code lautet wie folgt :

 $('#table1 tbody tr:odd').css('background-color', '#bbf');
$('#table1 tbody tr:even').css( 'background-color',' #ffc');
//Operationsklasse
$("#table1 tbody tr:odd").addClass("odd");
$("#table1 tbody tr:even").addClass ("even");

3. Eine Zeile ausblenden

Code kopieren Der Code lautet wie folgt:

$('#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

Kopieren Sie den Code Der Code lautet wie folgt:

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

5 Zeile

Code kopieren Der Code lautet wie folgt:

// Alle Zeilen außer der ersten löschen row
$('#table1 tr:not(:first)') .remove();
//Löschen der angegebenen Zeile
$('#table1 tr:eq(3)').remove ();

6. Eine Spalte löschen

Code kopieren Der Code ist wie folgt folgt:

// Alle Spalten außer der ersten Spalte löschen
$ ('#table1 tr th:not(:nth-child(1))').remove();
$( '#table1 tr td:not(:nth-child(1))').remove( );
//Erste Spalte löschen
$('#table1 tr td::nth-child(1) ').remove();

7. Den Wert einer bestimmten Zelle abrufen (setzen)

Code kopieren Der Code lautet wie folgt:

// Setze Tabelle1, den Wert des ersten td des zweiten trs. 
$('#table1 tr:eq(1) td:nth-child(1)').html('value'); 
// Tabelle1 abrufen, den ersten td des zweiten tr-Werts. 
$('#table1 tr:eq(1) td:nth-child(1)').html();

8. Fügen Sie eine Zeile ein

Code kopieren Der Code lautet wie folgt:

// Fügen Sie eine Zeile nach dem zweiten tr ein
$('< ;tr> Insert 3InsertInsertInsert').insertAfter( $('#table7 tr:eq(1)'));

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

Code kopieren Der Code lautet wie folgt:

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

Code kopieren Der Code lautet wie folgt:

//Methode Null:
$('#all').on('click', function () {
$('input.checkSub').prop('checked', this.checked); // Effekte zu den aktuell gebundenen Unterauswahlen hinzufügen
});

//Methode 1:
//Alle auswählen oder nicht alle auswählen. Der übergebene Parameter ist beispielsweise: 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);
}
}
//Methode 2:
//Alle oder keine auswählen Der übergebene Parameter ist dieser, etwa: 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);
}
}
//Methode 3:
//Alle oder keine auswählen Der Eingabeparameter ist das. Zum Beispiel: checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").each(function( i ){
$(this).attr("checked",evt.checked)
});
}
//Methode 4:
//Alle oder keine auswählen Der übergebene Parameter in ist das. Zum Beispiel: checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").attr( "checked ",evt.checked);
}

11. Der Client fügt dynamisch Zeilen hinzu

Code kopieren Der Code ist wie folgt:

function btnAddRow(){
//Die Zeilennummer beginnt bei 0 und die letzte Zeile ist die Schaltfläche zum Hinzufügen, Löschen und Speichern, also subtrahiere 2
var rownum=$( "#table1 tr").length-2;
var chk="" ;
var text="";
var sel="< ;select id= 'sel_' rownum "'>";
var row="" chk "" text "" " text "" text "";
$(row).insertAfter($("#table1 tr:eq(" rownum ") ") ;
Der Code lautet wie folgt:

Es kann jeweils nur eine Zeile gelöscht werden. Beim Löschen mehrerer Zeilen tritt ein Fehler auf. Funktion btnDeleteRow(){
$("#table1 tr").find(" input[type='checkbox']").each(function(i){ if($(this).attr("checked")){

if(i!=0){//Zeilenüberschriften können nicht gelöscht werden Besser: Sie können mehrere Datensätze gleichzeitig löschen function btnDeleteRow(){ $("#table1. tr").each(function (i) { var chk=$(this).find(" input[type='checkbox']"); if(chk.attr("id")!="checkall"){//Der Titel Zeile kann nicht gelöscht werden if(chk.attr("checked") ; 🎜>

Code kopieren


 Der Code ist wie folgt folgt:


function btnSaveClick(){
 //Ich weiß nicht, wie ich mehrere Filterbedingungen in der find()-Methode festlegen soll, daher kann ich den Wert der Auswahlliste unten nicht abrufen
 //$(" #table1 tr td").find("input[type='text']" || "select").each(function(i){
 //alert($(this). val()); 
 //}); ='text']").length>0){
                Alert($(this).find("input[type='text']"). val()); (this).find("select").length>0)
 {
 warning($(this).find("select").val());
 } 
 }) ;
}