0

这是我的代码：

<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()或on()方法一样？我也可以使用nth-child选择器，代码如下：

  tr:nth-child(odd)
{
    background:lightgray;
}
tr:nth-child(even)
{
    background:white;
}

但是就像w3cschools说的一样，不支持IE8及更早的版本，不知道Chrome、Firefox、Safari等其他主流浏览器的更早版本是否也支持这个选择器？那么，有没有一种高度兼容的方法来做到这一点？

4

2 回答 2

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

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

于 2013-03-20T12:08:20.707 回答
0

修改您的脚本标签，如下所示。

<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添加新内容。trtable

于 2013-03-20T12:11:59.593 回答