Question

这是我的代码：

<script type="text/javascript">
$(function(){
    $("input[type='button']").click(function(){
        $("#table tbody").append($("<tr>").append($("<td>").text("new")));
    });

            /*double-color effect*/
    $("#table tbody tr:even").css({"background":"lightgray"});
    $("#table tbody tr:odd").css({"background":"white"});
});
</script>
</head>
<body>
<input type="button" value="click" />
<table id="table">
    <tbody>
        <tr><td>hello</td></tr>
        <tr><td>world</td></tr>
        <tr><td>I am here</td></tr>
    </tbody>
</table>
</body>

我希望新创建的tr元素也有双色效果，但它们没有，我想知道jQuery是否可以支持动态应用CSS，就像live()或{{1方法呢？我也可以使用on()选择器，代码如下：

nth-child

但就像w3cschools所说，它不支持IE8和早期版本，我不知道Chrome，Firefox和Safari等其他主流浏览器的早期版本是否也支持这个选择器？那么，有一种高度兼容的方式吗？

Answer 1

$("#table tbody tr:even").css({"background":"lightgray"});

仅更改现有元素，不添加css规则。如果要将其应用于新元素，则必须在添加元素后再次执行它。只需将它放在您为click函数提供的事件处理程序中。

Answer 2

修改脚本标记，如下所示。

<script type="text/javascript">
$(function(){
    $("input[type='button']").click(function(){
        $("#table tbody").append($("<tr>").append($("<td>").text("new")));
        ApplyCss();
    });

   ApplyCss();
});

function ApplyCss() {
            /*double-color effect*/
    $("#table tbody tr:even").css({"background":"lightgray"});
    $("#table tbody tr:odd").css({"background":"white"});
}
</script>

在ApplyCss()中添加新的css后，此tr功能会应用table。

jQuery是否支持将CSS应用于新创建的元素？

2 个答案: