Wie man die Hintergrundfarbe einer Tabellenzelle mit jQuery ändert

Question

Ich möchte die Hintergrundfarbe der Zelle basierend auf ihrem Textinhalt mit Hilfe von jQuery ändern.

Beispiel:

Für die zweite Zeile in der "Exceeds" td möchte ich die Hintergrundfarbe in grün ändern, weil sie den Text "Exceeds" enthält...

Jedi Armor1Bedarf
Jedi Armor2Übersteigt

Answer 1

Ich nehme an, dass Sie die Farbe der Zelle ändern möchten und nur die Zelle. Wenn Sie die Farbe basierend auf ihrem Text ändern möchten, verwenden Sie den contains() jQuery Selector :

CSS :

.greenBg {
    background: green;
}

jQuery :

$("td:contains('Überschreitet')").addClass('greenBg');

jsFiddle Demo

Bearbeiten :

Wenn Sie dies nur auf die zweite Spalte beschränken möchten, wäre dies passender :

$("td:nth-child(2):contains('Überschreitet')").addClass('greenBg');

Falls jemand die Farbe der gesamten Spalte ändern möchte :

$("td:nth-child(2):contains('Überschreitet')").closest('table').find('td:nth-child(2)').addClass('greenBg');

jsFiddle Demo

Answer 2

Update der folgenden Frageklärung:

Demo Fiddle

Um die Hintergrundfarbe einer Zelle basierend auf dem Wert einer anderen zu ändern, können Sie z.B. verwenden:

$('table tr td:nth-child(4)').each(function () {
    $(this).text() == 'Exceeds' && $(this).parent().find('td:nth-child(2)').css('background-color', 'green');
});

---

Um den Hintergrund einer bestimmten Spalte zu ändern:

$('table tr td:nth-child(2)').css('background-color', 'red');

Allerdings sollten Sie versuchen, die Trennung von Stilen beizubehalten, indem Sie CSS verwenden, in diesem Fall können Sie dies wie folgt erreichen:

table tr td:nth-child(2){
  /* styles*/
}

Oder.. wenn Sie speziell dynamische Kontrolle benötigen, anstatt den Stil direkt in jQuery zuzuweisen, fügen Sie eine Klasse hinzu:

$('table tr td:nth-child(2)').addClass('rowBackground');

Dann in Ihrem CSS:

.rowBackground{
  background-color:red;
}

Answer 3

Native JS:

var td = document.getElementsByTagName("td");
var i = 0, tds = td.length;
for (i; i < tds; i++) {
    if (td[i].innerHTML == "Überschreitet") {
        td[i].setAttribute("style", "background:green;");
    }
}

Here's a jsfiddle to show: http://jsfiddle.net/vHvLh/

Answer 4

Sie können den .eq() oder :eq() Selektor verwenden:

$('table tr td:eq(3)').css('background-color','green');

oder verwenden Sie .last(), wenn das td, dessen Farbe Sie ändern möchten, immer das letzte td ist:

$('table tr td').last().css('background-color','green')