wie der CSS-Stil zu halten, nachdem eine Zeile in Tabelle von jquery Einfügen

Question

ich einen CSS-Stil

#mytbody > tr > th { 
     background-color: red; 
    } 

und das Skript

function myclick() { 
     $("#mytbody").append("<tr><td>1</td><td>1</td>/tr>"); 
    } 

Hier ist mein HTML-Code:

<table> 
    <thead> 
     <tr> 
      <td>head 1</td> 
      <td>head 2</td> 
     </tr> 
    </thead> 
    <tbody id="mytbody"> 
     <tr> 
      <th>1</th> 
      <th>2</th> 
     </tr> 
    </tbody> 
</table> 
<button type="button" onclick="myclick()">button</button> 

Der CSS-Stil verschwand für die neue Zeile, die durch Klicken auf die Schaltfläche hinzugefügt wurde.

Warum hat die CSS nicht für das Hinzufügen Linie funktionieren und wie die CSS-Stil halten neue Linie für das Hinzufügen? Vielen Dank!

Answer 1

Es passiert, weil Ihr CSS nur für den th Tag ist. Sie sollten auch CSS für td hinzufügen:

#mytbody > tr > th, 
#mytbody > tr > td { 
    background-color: red; 
} 

Answer 2

Es ist wie der Hauptgrund sieht, von den von Ihnen bereitgestellten Informationen, ist, dass die CSS-Deklaration tatsächlich nicht zu den zusätzlichen Elementen entspricht. Ihre Stildeklaration gilt nur für die Tags th, nicht aber für die Tags td.

versuchen, etwas wie folgt aus:

#mytbody > tr > th, 
#mytbody > tr > td { 
    background-color: red; 
} 

Answer 3

Hier ist meine Antwort,

$("button").click(function(){ 
 
    $("#mytbody").append("<tr><td>1</td><td>2</td></tr>"); 
 
});

 

 
#mytbody > tr > th { 
 
    background-color: red; 
 
} 
 
#mytbody > tr > td { 
 
    background-color: orange; 
 
}

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
     <tr> 
 
      <td>head 1</td> 
 
      <td>head 2</td> 
 
     </tr> 
 
    </thead> 
 
    <tbody id="mytbody"> 
 
     <tr> 
 
      <th>1</th> 
 
      <th>2</th> 
 
     </tr>  
 
    </tbody> 
 
</table> 
 
<button type="button">button</button>

Answer 4

Ich werde nicht wiederholen, Antworten aus vorherigen Beispielen aber wollen etwas, das erwähnen realated .

Wenn Sie vollständige Tabelle über Ajax laden und vergessen, <thead> oder <tbody> in Ihrem Code zu setzen, können Sie das ähnliche Problem mit CSS erleben, besonders wenn Sie Bootstrap verwenden.

Viele Entwickler verwenden diese Tags nicht innerhalb von Tabellen und Browser reparieren diese in DOM, aber wenn Sie mit AJax laden, erhalten Sie diese Tags nicht, wenn Sie nicht vorher in der Datei definieren und das CSS auch brechen kann.