Tabelle laden CSS beim Starten der Seite

Question

Ich möchte Zeilenhintergrund und Schriftfarbe der Tabelle beim Start der Seite ändern. Wie geht das? Momentan hatte ich es nur im mouseout Event gemacht.

$("#tableGrid").ready(function(){ 
 

 
}); 
 

 
$("#tableGrid").on("mouseout","tr", function() { 
 
    if($(this).children("td:eq(15)").text() == "CREATED") { 
 
    $(this).children("td").css('background', '#fffff9'); 
 
    $(this).children("td").css('color', '#000000'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='bal-main-conatiner bal-table booking-table' id="tableGrid"></div>

Answer 1

können Sie $(document).ready versuchen

$(document).ready(function(){ 
    // styling stuff goes here 
    // This function will be executed when the page is loaded 
}); 

Answer 2

window.onload = function(){ 
    //what you wanna 
} 

auslösen, wenn dom Elemente geladen werden.

Wenn Sie es so schnell wie möglich wollen, und wollen nicht alle Elemente laden (weil Sie Tonnen von DOM-Elementen haben können und es dauert lange, alle zu laden?) Sie können etwas wie gehen:

function myFunc() { 
    if (document.getElementById('myElement')) { 
    // do stuff 
    } else { 
    setTimeout(myFunc, XNumber); 
    } 
} 

Hier wird die Callback-Funktion in Timeout wird alle XNumber Millisekunden aufgerufen und wenn das Element in DOM ist es löst die // do stuff

Aber die wichtigste Frage ist, warum willst du tun Trog es, sobald der Tisch JS wird geladen, nachdem die Tabelle geladen wurde und zuvor kein CSS bereit ist dass also, wenn die Tabelle geladen ist, der Stil schon da ist und auf ihn angewendet wird?

Ich würde mit statischen CSS-Overrides sicher gehen, wenn es die einmalige Sache ist. Es ist einfach, lesbar, folgt der Konvention, trennt Probleme in der üblichen Weise und CSS sollte geladen werden, bevor Elemente auftauchen, so dass es sofort auf Ihren Tisch wirkt.

Was wären die Nachteile des üblichen CSS-Ansatzes? Wenn Sie den Stil dynamisch anfügen müssen, können Sie immer noch onload verwenden und nur eine Klasse zur gesamten Tabelle hinzufügen.