javascript - 如何在通过 jquery 向表中插入一行后保持 css 样式

Question

我有一个CSS样式

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

和脚本

    function myclick() {
        $("#mytbody").append("<tr><td>1</td><td>1</td>/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>

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

为什么 css 对添加行不起作用以及如何保持添加新行的 css 样式？非常感谢!

Answer 1

这是我的答案，

$("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>