jQuery Girl
  1. jQuery Girl
  3. Comment définir la couleur des lignes de la table en fonction de la valeur de la colonne dans la table de données jQuery
Intereting Posts
Les boutons next et prev de l’interface utilisateur de JQuery Datepicker n’ont qu’un seul ancêtre. $ (e.target) .parents () ne renvoie qu’un élément Déclarer un appel jQuery AJAX pour exécution ultérieure Numérotation automatique des rubriques H1-H6 à l’aide de jQuery dataTables.js ne redimensionnant pas correctement. La table déborde toujours Trouver l’identifiant du bouton cliqué Envoi de tableau multidimensionnel via ajax Un système de vote avec jQuery, PHP et Smarty Articles de blog de chargement paresseux PHP & Javascript: Comment protéger le pirate Web pour la méthode post et get? jQuery UI autocomplete avec JSON Galerie d’images avec la colonne et deux légendes Fondu dans une ligne de tableau lorsqu’il est ajouté à une table jQuery slideToggle ne fonctionne pas avec colspan dans Firefox? Prévoyez des divs sans les fermer Charger le mode modal dans la boucle foreach

Comment définir la couleur des lignes de la table en fonction de la valeur de la colonne dans la table de données jQuery

J’utilise jQuery datatables.J’ai les données comme suit 

Column1 Column2 Column3 ----------------------- AAA BBB CCC AAA GGG YYY BBB ooo LLL

Maintenant, dans column1 pour les 2 premières lignes, j’ai la même valeur AAA Je veux appliquer une couleur à ces lignes.Et puis une autre couleur pour la troisième ligne.Comme cela, j’ai 30 enregistrements.Est-il possible de le faire.If possible comment je peux J’utilise des tables de données jQuery.Merci d’avance ..

Utilisez le fnRowCallback (ou le plus récent rowCallback ) pour y parvenir. 

 $('#example').dataTable({ "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) { switch(aData[0]){ case 'AAAA': $(nRow).css('color', 'red') break; case 'BBBB': $(nRow).css('color', 'green') break; case 'CCCC': $(nRow).css('color', 'blue') break; } } });

Démo: Violon

L’API a récemment changé, vous devez maintenant utiliser aData [‘Column1’] au lieu de aData [0]

La fonctionnalité createdRow a été ajoutée dans la version 1.10.

Ce rappel est exécuté lorsqu’un élément TR est créé (et que tous les éléments enfants TD ont été insérés) ou enregistré si une source DOM est utilisée, ce qui permet la manipulation de l’élément TR.

Ceci est particulièrement utile lors de l’utilisation du rendu différé (deferRender) ou du traitement côté serveur (côté serveur) afin que vous puissiez append des événements, des informations sur le nom de la classe ou autrement formater la ligne lors de sa création.

https://datatables.net/reference/option/createdRow

Exemple: 

  $('#example').dataTable({ // ... "createdRow": function( row, data, dataIndex ) { if ( data["column_index"] == "column_value" ) { $( row ).css( "background-color", "Orange" ); $( row ).addClass( "warning" ); } }, // ... });