Wie man die Hintergrundfarbe auf das dynamisch erzeugte TR-Element legt

Ich habe die Bootstrap-Datum/Uhrzeit-Auswahl verwendet und muss nun eine Hintergrundfarbe zu einem Element im Bootstrap-Kalender hinzufügen.Wie man die Hintergrundfarbe auf das dynamisch erzeugte TR-Element legt

Ich habe dieses HTML erstellt:

<tr HERE I NEED STYLE> 
    <td> 
     <span class="timepicker-hour" data-time-component="hours" title="Pick Hour" data-action="showHours">01</span> 
    </td> 
    <td class="separator">:</td> 
    <td> 
     <span class="timepicker-minute" data-time-component="minutes" title="Pick Minute" data-action="showMinutes">30</span> 
    </td> 
    <td> 
     <button class="btn btn-primary disabled" data-action="togglePeriod" tabindex="-1" title="Toggle Period">PM</button> 
    </td> 
</tr>

Gibt es einfache Möglichkeit, Hintergrund auf dem ersten TR-Elemente mit CSS zu setzen?

Quelle

2017-02-01 Aleks Per

Wenn die Elemente dynamisch sind und Sie sie formatieren müssen, müssen Sie dem TR eine Klasse hinzufügen oder sie auswählen mit: nth-child (oder ähnlich) in css (wie scoopzilla in ihrer Antwort angibt). Wenn Sie derjenige sind, der diese Zeilen erzeugt, wird das trivial. Wenn Sie diese Zeilen nicht generieren, ist es nur ein bisschen schwieriger. – rlemon

Ich hoffe, es funktioniert !! Verwendung Inline-Stil

<tr style="background-color:blue;"><td><span class="timepicker-hour" data-time-component="hours" title="Pick Hour" data-action="showHours">01</span></td><td class="separator">:</td><td><span class="timepicker-minute" data-time-component="minutes" title="Pick Minute" data-action="showMinutes">30</span></td><td><button class="btn btn-primary disabled" data-action="togglePeriod" tabindex="-1" title="Toggle Period">PM</button></td></tr>

Quelle

2017-02-01 12:10:02

nein nein ... Inhalt ist dynamisch erstellt –

Versuchen Sie es mit jQuery:

$("#id_of_tr").css('background-color', 'red');

Quelle

2017-02-01 12:17:50 Maad

nein nein ... Inhalt ist dynamisch erstellt –

-1

Ich bin nicht sicher, aber dies kann Ihnen helfen.

$('tr.some_class:first').css("background-color", "blue");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="some_class"> 
 
    <td><span class="timepicker-hour" data-time-component="hours" title="Pick Hour" data-action="showHours">01</span> 
 
    </td> 
 
    <td class="separator">:</td> 
 
    <td><span class="timepicker-minute" data-time-component="minutes" title="Pick Minute" data-action="showMinutes">30</span> 
 
    </td> 
 
    <td> 
 
     <button class="btn btn-primary disabled" data-action="togglePeriod" tabindex="-1" title="Toggle Period">PM</button> 
 
    </td> 
 
    </tr> 
 
    <tr class="some_class"> 
 
    <td><span class="timepicker-hour" data-time-component="hours" title="Pick Hour" data-action="showHours">01</span> 
 
    </td> 
 
    <td class="separator">:</td> 
 
    <td><span class="timepicker-minute" data-time-component="minutes" title="Pick Minute" data-action="showMinutes">30</span> 
 
    </td> 
 
    <td> 
 
     <button class="btn btn-primary disabled" data-action="togglePeriod" tabindex="-1" title="Toggle Period">PM</button> 
 
    </td> 
 
    </tr> 
 
    <tr class="some_class"> 
 
    <td><span class="timepicker-hour" data-time-component="hours" title="Pick Hour" data-action="showHours">01</span> 
 
    </td> 
 
    <td class="separator">:</td> 
 
    <td><span class="timepicker-minute" data-time-component="minutes" title="Pick Minute" data-action="showMinutes">30</span> 
 
    </td> 
 
    <td> 
 
     <button class="btn btn-primary disabled" data-action="togglePeriod" tabindex="-1" title="Toggle Period">PM</button> 
 
    </td> 
 
    </tr> 
 
</table>

Sie können auch zufällige Farben erzeugen Math.random()

var back = mit [ "# ff0000", "blau", "grau"];

var rand = zurück [Math.floor (Math.random() * back.length)];

$ ('tr.some_class: first'). Css ("background-color", rand);

Quelle

2017-02-01 14:05:59

Was ist der Grund für die Abstimmung unten? –

Erstellen Sie eine globale <style> für die Tabelle.

Setzen Sie Ihre Stile für das <tr> dort.

<style type="text/css"> 
    tr { 
     background-color: #ff0000; 
    } 
</style>

könnten Sie auch knifflig und fügen Sie es nur zu jedem anderen:

<style type="text/css"> 
    tr:nth-child(even){ 
     background: #ff0000 
    } 
</style>

Gerade diese Art direkt vor Ihren dynamischen Schleife laufen.

Quelle

2017-02-01 17:13:40 scoopzilla

Wie man die Hintergrundfarbe auf das dynamisch erzeugte TR-Element legt

Antwort

Verwandte Themen