Wie eine Klasse td-Tag in Bootstrap-Tabelle mit Jquery

Question

ich unter jQuery-Code für meine Bootstrap-Tabelle Neben

$(document).ready(function() { 
    $('.table>tr>td').addClass('redBg'); 
    console.log('hg');  
}); 

verwendet habe, hinzufügen, wie ich diese

versuchte man

$(document).ready(function() { 
    $('.table>tbody>tr>td').addClass('redBg'); 
    console.log('hg'); 

}); 

Aber die Klasse wird nicht an den td Tag hinzugefügt,

Hier ist die Arbeits Geige ist https://jsfiddle.net/udarazz/0vx7tjfq/

Kann mir jemand helfen, dieses Problem zu beheben?

Answer 1

Wenn Sie weglassen, viele Browser fügen implizit einen <tbody> Container hinzu, um alle Tabellenzeilen zu umbrechen. Sie können dies überprüfen, indem Sie die Entwicklerwerkzeuge/den Inspektor Ihres Browsers verwenden. Die resultierende Struktur:

<table> 
    <tbody> 
     <tr> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

Es bedeutet <tr> ist nicht länger ein direkter Nachkomme von <table> und Ihre table > tr Wähler nicht mehr funktionieren.

um es zu umgehen, können Sie entweder:

• Explizit <tbody> in Ihrem Markup enthalten und table > tbody > tr > td Selektor verwenden. table tr > td

JSFiddle Arbeiten:

Sie nicht direkt Selektor Kind verwenden.

Als Bootstrap Arten die Hintergründe von geraden Zeilen und schwebt, könnten Sie Ihre Klassendefinition spezifischer als Bootstrap des integrierten Stile machen müssen:

table.table tr > td.redBg { 
    background-color: red; 
} 

Alternativ Sie !important zu Ihrem CSS hinzufügen können, außer Kraft zu setzen :

.redBg { 
    background-color: red !important; 
} 

Answer 2

AKTUALISIERT JQUERY

$(document).ready(function() { 
    $('.table tr > td').addClass('redBg'); 
    console.log('hg'); 
}); 

Answer 3

Wenn es das erste <td> im <table> Sie versuchen, die Klasse hinzuzufügen zu verwenden:

$(document).ready(function() { 
    $('.table tr td:first-child').addClass('redBg'); 
    console.log('hg'); 
}); 

https://jsfiddle.net/0vx7tjfq/5/