Résumé des méthodes et techniques courantes pour exploiter les tables avec jQuery_jquery

Ce qui suit est une liste de 13 fonctions couramment utilisées par jQuery pour faire fonctionner les tables :

1. La ligne change de couleur lorsque la souris bouge

Copiez le code Le code est tel suit :

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

Méthode 2 :

Copier le code Le code est le suivant :

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

2. Différentes couleurs pour les lignes paires et impaires

Copiez le code Le code est le suivant :

$('#table1 tbody tr:impair').css('background-color', '#bbf');
$('#table1 tbody tr:pair').css( 'background-color',' #ffc');
//Classe d'opération
$("#table1 tbody tr:impair").addClass("impair");
$("#table1 tbody tr:even").addClass ("even");

3. Masquer une ligne

Copier le code Le code est le suivant :

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

4. Masquer une colonne

Copiez le code Le code est le suivant :

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

5. rangée

Copier le code Le code est le suivant :

// Supprimer toutes les lignes sauf la première row
$('#table1 tr:not(:first)') .remove();
//Supprimer la ligne spécifiée
$('#table1 tr:eq(3)').remove ();

6. Supprimer une colonne

Copier le code Le code est tel suit :

// Supprimer toutes les colonnes sauf la première colonne
$ ('#table1 tr th:not(:nth-child(1))').remove();
$( '#table1 tr td:not(:nth-child(1))').remove( );
//Supprimer la première colonne
$('#table1 tr td::nth-child(1) ').remove();

7. Obtenir (définir)La valeur d'une certaine cellule

Copier le code Le code est le suivant :

// Définir table1, La valeur du premier td du deuxième tr.
$('#table1 tr:eq(1) td:nth-child(1)').html('value');
// Récupère table1, le premier td de la deuxième valeur tr.
$('#table1 tr:eq(1) td:nth-child(1)').html();

8. Insérez une ligne

Copier le code Le code est le suivant :

// Insérer une ligne après le deuxième tr
$('< ;tr> Insérer 3InsérerInsérerInsérer').insertAfter( $('#table7 tr:eq(1)'));

9. Obtenez la valeur de la cellule spécifiée dans chaque ligne

Copier le code Le code est le suivant :

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

10. Sélectionner tout ou rien

Copier le code Le code est le suivant :

//Méthode zéro :
$('#all').on('click', function () {
$('input.checkSub').prop('checked', this.checked); // Ajouter des effets aux sous-sélections actuellement liées
});

//Méthode 1 :
//Sélectionner tout ou ne pas tout sélectionner. Le paramètre transmis est event Par exemple : 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);
}
}
//Méthode 2 :
//Sélectionner tout ou rien le paramètre transmis est le suivant, tel que : 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);
}
}
//Méthode 3 :
//Sélectionner tout ou rien Le paramètre d'entrée est-ce. Par exemple : checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").each(function( i ){
$(this).attr("checked",evt.checked)
});
}
//Méthode 4 :
//Sélectionner tout ou rien Le paramètre passé in est ceci. Par exemple : checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").attr( "checked ",evt.checked);
}

11. Le client ajoute dynamiquement des lignes

Copier le code Le code est la suivante :

function btnAddRow(){
//Le numéro de ligne commence à 0, et la dernière ligne est le bouton ajouter, supprimer, enregistrer, donc soustraire 2
var rownum=$( "#table1 tr").length-2;
var chk="" ;
var text="";
var sel="< ;select id= 'sel_" rownum "'>HommeFemme";
var row="" chk "" sel " " texte "" texte "";
$(row).insertAfter($("#table1 tr:eq("rownum") ") ;
Le code est le suivant :

Une seule ligne peut être supprimée à la fois. Une erreur se produit lors de la suppression de plusieurs lignes. fonction btnDeleteRow(){
$("#table1 tr").find(" input[type='checkbox']").each(function(i){ if($(this).attr("checked")){

if(i!=0){//Impossible de supprimer les en-têtes de ligne                                                          Mieux, vous pouvez supprimer plusieurs enregistrements à la fois function btnDeleteRow(){ $("#table1 tr").each(function(i ) { var chk=$(this).find(" input[type='checkbox']"); if(chk.attr("id")!="checkall"){//Le titre la ligne ne peut pas être supprimée   if(chk.attr("checked") ; 🎜>

Copier le code


Le code est tel suit :

function btnSaveClick(){
//Je ne sais pas comment définir plusieurs conditions de filtre dans la méthode find(), donc je ne parviens pas à obtenir la valeur de la liste de sélection ci-dessous
//$(" #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)
{
alert($(this).find("select").val());
}
}) ;
}