J'ajoute du HTML dynamiquement en utilisant Javascript et je veux ajouter du CSS avec le HTML. Dans mon code, seul le css du tableau est récupéré par le navigateur, le css du e n'apparaît pas.

Javascript

var html = "<table class = 'table'>";
    html += "<thead>";
        html += "<tr><th>";
        html += "Name: " + data.name;
        html += "</th></tr>";
    html += "</thead>";

    html += "<tbody>";
        html += "<tr><td>";
        html += "Address: " + data.address;
        html += "</td></tr>";
        html += "<tr><td>";
        html += "Phone: " + data.phone;
        html += "</td></tr>";
    html += "</tbody>";
html += "</table>";

$(".info").html(html);

CSS

.table {
    border: 1px solid red;
}

.th {
    /* not applied successfully */
    color: red; 
}

Pourquoi cela arrive-t-il?

0
kevin_b 8 août 2016 à 19:02

3 réponses

Meilleure réponse

Vous n'avez pas spécifié la classe th. Vous devez faire <th class='th'> en fonction de votre CSS.

Ou vous pouvez changer votre feuille de style: supprimez simplement le point devant le e .

0
Steve 8 août 2016 à 16:04

La raison pour laquelle cela se produit est que vous n'avez pas de sélecteur CSS correspondant pour l'élément <th. La sélection que vous prévoyez de travailler recherche des éléments qui ont une classe de .th, mais il n'y en a pas.

Une solution serait de supprimer le sélecteur de classe dans votre CSS et d'utiliser simplement l'élément lui-même:

th {
  color: red
}

(Remarquez qu'il n'y a pas de point)

0
adam-beck 8 août 2016 à 16:05

Vous avez la classe .table mais il n'y a pas de classe pour .th

    html += "<tr><th class='th'>";
    html += "Name: " + data.name;
    html += "</th></tr>";

Essayez peut-être de changer le CSS en

.table {
border: 1px solid red;

}

th {
/* not applied successfully */
color: red; 
}

Se débarrasser de l'identifiant de classe

0
whisk 8 août 2016 à 16:10