Évolution des éléments de style basé sur le contenu de la cellule

J'ai un tableau, comme ceci:

<table>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>one</td>
  </tr>
</table>

À l'aide de Javascript, comment puis-je rechercher la table et le changement d'un élément de style (par exemple,backgroundColor) sur la base du contenu d'une cellule (par exemple, faire de la couleur d'arrière-plan de toutes les cellules avec le mot " un " en rouge)?

OriginalL'auteur user1129274 | 2012-01-04

  1. 5

    DÉMO

    var allTableCells = document.getElementsByTagName("td");

for(var i = 0, max = allTableCells.length; i < max; i++) {
    var node = allTableCells[i];

    //get the text from the first child node - which should be a text node
    var currentText = node.childNodes[0].nodeValue; 

    //check for 'one' and assign this table cell's background color accordingly 
    if (currentText === "one")
        node.style.backgroundColor = "red";
}
    Merci, c'est parfait! J'aurais répondu plus tôt mais j'ai eu à crier au OpenDNS.

    OriginalL'auteur Adam Rackis

  2. 6

    Voici le code qui recherche la table et définit la couleur d'arrière-plan de toutes les cellules qui le contenu est "l'un". Je suppose que vous pouvez adapter pour vérifier pour d'autres valeurs:

    var cells = document.getElementById("test").getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
    if (cells[i].innerHTML == "one") {
        cells[i].style.backgroundColor = "red";
    }
}

    avec ce code HTML:

    <table id="test">
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>one</td>
  </tr>
</table>

    Et voici un travail de démonstration: http://jsfiddle.net/jfriend00/Uubqg/

    OriginalL'auteur jfriend00

  3. 1

    Utilisation getElementsByTagName() pour retourner les cellules, et de faire correspondre les termes dans leur innerText propriété:

    var tds = document.getElementById("table-id").getElementsByTagName("td");
var num_tds = tds.length;
for (var i = 0; i < num_tds; i++) {
  if (tds[i].innerText.indexOf("one") > -1) {
    tds[i].style.backgroundColor = "red";
  }
}

    Note: Ce sera le match le mot "un" n'importe où dans la cellule.

    Ici, il est en action sur jsFiddle.

    OriginalL'auteur Michael Berkowski

  4. 0

    Aussi, un jQuery exemple (pour la totalité de l'image)

    $.each($('td'), function () {
  if($(this).html() == 'one') {
    $(this).css('background-color', 'red');
  }
});

    Démo: http://jsbin.com/ulexub

    OriginalL'auteur Sergio Tulentsev

  5. 0

    Pourquoi utiliser Javascript pour faire cela? Au lieu de livrer le tableau avec les cellules ayant la classe par exemple

    <td class="oneCell">One</td>

    Puis il suffit d'utiliser CSS pour mettre en forme le contenu que vous voyez l'ajustement.

    Si vous avez vraiment besoin d'utiliser le Javascript, vous devez regarder dans le DOM. Il y a plusieurs références en ligne, par exemple http://www.howtocreate.co.uk/tutorials/javascript/domstructure

    Pourquoi utiliser du Javascript pour faire cela? Parce que parfois vous ne savez pas ce qui va être dans la cellule du tableau, ou ce que vous voulez rechercher. Par exemple, permettant à l'utilisateur de rechercher dans la table et en mettant en évidence les cellules qui correspondent à la saisie du texte.
    Vraiment, une partie du serveur ou du Javascript doit placer les données dans la cellule - donc en mesure de définir la classe.
    Mais vous ne pouvez pas vous concocter un nom de classe pour chaque valeur de cellule.
    Exemple (basé sur Adam Rackis réponse): jsfiddle.net/CjW77/1
    Oui, vous peut - Il existe un nombre fini de cellules. Seulement le nombre: cell1 cellule2 .... Mais la question implique que la personne veut toutes les cellules avec une valeur particulière pour avoir un style. La solution que j'ai donnée avec l'utilisation de Javascript est à la fois plus facile et fonctionne également pour les personnes qui n'ont pas javascript activé.

    OriginalL'auteur Ed Heal

  6. 0

    Je voulais une solution dynamique, fondée sur la valeur et ne présente

        $('.dataframe td').each(function(){
        var num = parseFloat($(this).text());
        if (num > 0) {
            $(this).addClass('success');
            //$(this).css('color','Green');
        } else if (num < 0) {
            $(this).addClass('danger');
            //$(this).css('color','Red');
        }
    });

    OriginalL'auteur citynorman