Ajouter une classe à une ligne de la table qui contient les colonnes avec certaines valeurs

J'ai besoin d'ajouter une classe à un tr lorsqu'il contient td's qui contiennent certaines valeurs.

À l'aide de la réponse à cette question, de SORTE, j'ai pensé que j'ai trouvé la solution, mais il ne semble pas fonctionner sur des lignes qui contient plusieurs colonnes - il ne fonctionne que si il y a un seul td.

Comment puis-je identifier les lignes de la table qui contiennent des colonnes de certaines valeurs, parmi d'autres colonnes? Veuillez noter que les colonnes ne seront pas toujours dans un certain ordre, donc il doit être une dynamique de réponse.

Le jsFiddle

<table>
    <tr>
        <td>Hey!</td>
        <td>Other column</td>
        <td>Yo!</td>
        <td>Other column2</td>        
    </tr>
</table>

<script type="text/javascript">
$('tr').each(function(){
 if (($(this).find('td').text() == 'Hey!' ) && ($(this).find('td').text() == 'Yo!' ))
 {
     alert('here');
     $(this).addClass('disabled');
 }
});
</script>
InformationsquelleAutor Luke Shaheen | 2012-05-16
  1. 1

    Comme d'autres l'ont mentionné, l'utilisation de jQuery :contains(text) sélecteur:

    $('tr').each(function(){
   if($('td:contains("Hey!")', this).length && $('td:contains("Yo!")', this).length){       
        alert('here');
        $(this).addClass('disabled');
    }
});

    Quelque chose comme ça.

    Modifier

    Mise à jour de ma réponse à l'utilisation length au lieu de jQuery size() fonction. Bravo à celles qui ont posté des éléments de preuve à l'appui de l'idée que l'aide length est plus rapide. Après avoir fait quelques recherches de base sur ma propre, est venu à travers ce dans le jQuery docs:

    L' .méthode size() est fonctionnellement équivalente à la .la longueur de la propriété;
    cependant, l' .la longueur de la propriété est préféré parce qu'il n'a pas
    la surcharge d'un appel de fonction.

    Étant donné que, de plus, les cas de test ci-dessous, je suis vendu. Me demande pourquoi size() existe encore? Je pensais que c'était parce que certains objets retournés par jQuery ne sont pas des tableaux, mais seulement se comporter comme des tableaux, et qu'étant donné que l'utilisation de size() était préférable. Semble que le plus tard, au moins, n'est pas le cas.

    Acclamations

    • J'ai mis à jour ma réponse à l'effet de levier :contains(text) comme d'autres l'ont souligné. Toutefois, je crois que ma réponse est la seule qui permettra de "désactiver" la ligne ssi il cotains par deux, les valeurs de texte.
    • length est toujours la meilleure.
    • Dit vous?
    • Cela fonctionne, mais quel est le but de la .size()? Et @VisioN, avez-vous des preuves/les raisons pour lesquelles length est toujours mieux?
    • Oui. Appel de fonction est de 2 opérations de plus que la propriété de l'objet. Sinon, ici, c'est un peu comme une preuve: stackoverflow.com/questions/2738352/...
    • Et voici la preuve absolue: jsperf.com/size-vs-length. Essayez-la.
    • Merci pour le suivi de/grâce à votre point, j'ai mis à jour ma réponse.
    • Pas très critique, dans ce cas, cependant, juste une bonne pratique.

    InformationsquelleAutor Madbreaks
  2. 1

    Ce sujet:

    $('td:contains("Hey!"),td:contains("Yo!")').parent('tr').addClass('disabled');

    ?

    Ou pour assurer les DEUX sont là

    $('tr').each(function(){

    if($('td:contains("Hey!")').length > 0 && $('td:contains("Yo!")').length > 0)
        $(this).addClass('disabled');

});

    • Ne pense pas que le travail, bien que j'aime l'idée d'utiliser contains. Votre sélecteur "désactiver" un tr qui contient des cellules avec/les deux valeurs de texte. Ressemble à l'op veut désactiver le forum les deux valeurs sont trouvées.
    • Ouais, j'ai relu la question et a remarqué que ce pourrait être le cas, était tout simplement de le tester quelque chose dans la tripoter avant de poster le deuxième exemple de code (juste demandé si je pouvais le faire dans un sélecteur de nouveau, mais je ne pouvais pas le comprendre)
    InformationsquelleAutor Lee
  3. 0

    Utiliser le contient sélecteur

    $("td:contains('Hey!'), td:contains('Yo!')").each(function(){
   alert('here');
   $(this).parent().addClass('disabled');
});
    • Que faire si une ligne de la table a une cellule qui a "hey!", mais pas une cellule qui a "Yo!"? Il sera toujours "désactiver" la ligne, droite?
    • Bon point 🙂 d'Autres ont mis à jour leurs réponses pour vérifier cette condition, donc je ne vais pas la peine de mettre à jour le mien.
    InformationsquelleAutor Mark Rawlingson
  4. 0

    C'est une solution:

    var search = ["Hey!", "Yo!"];

$("tr").filter(function() {
    var found = 0;
    $(this).children().each(function() {
        var text = $(this).text();
        for (var i = 0; i < search.length; i++) {
            if (text == search[i]) found++;
        }
    });
    return found == search.length;
}).addClass("disabled");​

    DÉMO: http://jsfiddle.net/Tnq9A/1/

    Si vous n'avez pas besoin coïncidence absolue des textes, mais partielle, vous pouvez utiliser cette méthode de comparaison:

    if (text.indexOf(search[i]) != -1) found++;

    DÉMO: http://jsfiddle.net/Tnq9A/2/

    • Votre fonction de filtre sera de retour true si elle trouve de la valeur, mais il ne doit retourner true si il trouve deux.
    • La droite. J'ai peut-être mal compris la question. Maintenant, il travaille en tant que de besoin.
    InformationsquelleAutor VisioN