Javascript 通过jquery向表中插入行后如何保持css样式

我有一个css样式

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

剧本呢

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

函数myclick（）{
$（“mytbody”）。附加（“11/tr>”；
}

以下是我的html代码：

<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>

总目1
总目2
1.
2.
按钮

单击按钮添加的新行的css样式消失

为什么css不适用于添加行，以及如何保持添加新行的css样式？

---

多谢各位

这是因为您的css仅用于

th

标记。您还应该为

td

添加css：

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

---

从您提供的信息来看，主要原因似乎是CSS声明实际上与添加的元素不对应。您的样式声明仅适用于

th

标记，而不适用于

td

标记

试着这样做：

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

这是我的答案

$（“按钮”）。单击（函数（）{
$（“mytbody”）。追加（“12”）；
});

#mytbody>tr>th{
背景色：红色；
}
#mytbody>tr>td{
背景颜色：橙色；
}

总目1
总目2
1.
2.
按钮
我不会重复前面例子中的答案，但我想提及一些与此相关的内容

如果您通过ajax加载完整的表，而忘记将
或
放在代码中，那么CSS可能会出现类似的问题，尤其是在使用引导时

许多开发人员没有在表和浏览器中使用这些标记，而是在DOM中修复了这些问题，但是当您使用ajax加载时，如果您之前没有在文件中定义这些标记，您将无法获得这些标记，这也会破坏CSS。
为每一行指定一个类，并且在
myclick（）
上也可以使用该类。
th
元素附加在
.append（“11/tr>”。是否要将
css
应用于
tr
或
td
元素？标记在HTML表格中定义了一个标题单元格。因此，请在THAD部分中使用，并在tbody中使用。Td标记定义表数据。