jquery legt die TD-Farbe fest

Während der Seitenentwicklung müssen wir möglicherweise bestimmte Zellen in der Tabelle mit speziellen Farben markieren, um bestimmte Informationen oder den Status anzuzeigen. Mit jQuery können Sie die Hintergrundfarbe, Schriftfarbe und andere Stile des TD in der Tabelle einfach und dynamisch festlegen.

1. Verwenden Sie jQuery, um die Zellenfarbe zu ändern.

In jQuery können wir CSS-Methoden verwenden, um den Stil von Zellen (TD) wie Farbe, Höhe, Breite usw. dynamisch zu ändern. Darunter lautet der Code zum Ändern der Hintergrundfarbe der Zelle wie folgt:

$("td").css("background-color", "red");

In diesem Beispiel wählen wir zuerst alle TD-Elemente aus und verwenden dann die Methode css(), um den Wert ihres Hintergrundfarbattributs zu ändern In der Abbildung dargestellt:

Ähnlich können wir auch die CSS-Syntax verwenden, um den Stil bestimmter TD-Elemente zu finden und zu ändern. Wenn wir beispielsweise die Hintergrundfarbe der Zellen in der zweiten Zeile und der dritten Spalte ändern müssen, können wir schreiben:

$("table tr:eq(1) td:eq(2)").css("background-color", "blue");

In diesem Beispiel wählen wir zuerst das <tr>元素，然后选择其中第三个<code><td>-Element in der zweiten Zeile aus und ändern schließlich seine Hintergrundfarbe Attributwert. <p>2. Verwenden Sie jQuery, um die Zellenfarbe basierend auf Bedingungen zu ändern. </p> <p> Zusätzlich zur direkten Änderung des Zellstils können wir den Stil bestimmter Zellen auch dynamisch basierend auf Bedingungen ändern. Um mit dem obigen Beispiel fortzufahren, möchten wir die Farbe einer Zelle basierend auf der Größe der darin enthaltenen Zahl ändern. </p> <p>Zuerst müssen wir die Zellen der Tabelle durchlaufen und dann die Werte in den Zellen mithilfe von Beurteilungsanweisungen bestimmen. Wenn die Zahl in der Zelle größer als 5 ist, ändern Sie die Hintergrundfarbe in Grün, andernfalls in Rot. Der Code wird wie folgt implementiert: </p><pre class='brush:php;toolbar:false;'>$(&quot;table tr&quot;).each(function(){ $(this).find('td').each(function(){ if(parseInt($(this).text()) &gt; 5){ $(this).css(&quot;background-color&quot;, &quot;green&quot;); }else{ $(this).css(&quot;background-color&quot;, &quot;red&quot;); } }); });</pre><p>In diesem Beispiel verwenden wir die Methode every(), um jede Zeile in der Tabelle zu durchlaufen, und verwenden dann die Methode find(), um die Zellen in jeder Zeile zu durchlaufen. Verwenden Sie die Methode text(), um den Inhalt der Zelle abzurufen, vergleichen Sie dann die Größe der Zahlen und ändern Sie den Wert des Hintergrundfarbattributs. </p> <p>3. Weitere Zellenstileinstellungen</p> <p>Zusätzlich zur Hintergrundfarbe können wir die meisten Attribute im Zellenstil auch dynamisch über CSS-Methoden ändern: </p><pre class='brush:php;toolbar:false;'>$(selector).css(&quot;propertyName&quot;, &quot;value&quot;);</pre><p>Zum Beispiel: </p> <p>1 Ändern Sie die Zellenschriftgröße und -farbe: </p><pre class='brush:php;toolbar:false;'>$(&quot;table td&quot;).css({&quot;font-size&quot;:&quot;18px&quot;, &quot;color&quot;:&quot;#333&quot;});</pre><p>2. Ändern Sie den Stil und die Farbe des Zellrahmens: </p><pre class='brush:php;toolbar:false;'>$(&quot;table td&quot;).css({&quot;border-style&quot;:&quot;solid&quot;, &quot;border-width&quot;:&quot;2px&quot;, &quot;border-color&quot;:&quot;#ccc&quot;});</pre><p>Zusätzlich zu den CSS-Methoden bietet jQuery auch andere Methoden zum Festlegen von Zellstilen, wie z. B. die Methoden addClass() und removeClass(), mit denen Klassenstile hinzugefügt bzw. entfernt werden können . . Diese Methoden können flexibler kombiniert werden, um verschiedene Einstellungseffekte für den Zellenstil zu erzielen. </p> <p>Zusammenfassung: </p> <p>jQuery bietet eine äußerst praktische Methode zum Festlegen des Zellenstils (TD), die unser spezifisches Markup von Tabellendaten erheblich vereinfachen kann. Durch das dynamische Festlegen von Zellstilen können wir den Seitenanzeigeeffekt schnell optimieren und das interaktive Erlebnis des Benutzers verbessern. </p> </td>

Das obige ist der detaillierte Inhalt vonjquery legt die TD-Farbe fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!