1

我想将除表中行的第一列之外的所有列设置为text-align:left，第一列text-align在 CSS 中定义。这是代码：

<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<style type="text/css">
table{
    border: 1px solid red;
    border-collapse: collapse;
}
table td{
    border: 1px solid red;
    text-align: center;
}
</style>
  <script type="text/javascript">
$(function(){
    $("input[type='button']").on("click", function(){
        $("#table tr td:gt(0)").css({"text-align":"left"}); 
    });

});
</script>
 </head>
<body>
<input type="button" value="click" />
<table id="table">
    <tbody>
        <tr><td width="150px">center</td><td width="150">left</td><td width="150">left</td></tr>
        <tr><td>center</td><td>left</td><td>left</td></tr>
                    <tr><td>center</td><td>left</td><td>left</td></tr>
    </tbody>
</table>
</body>

单击按钮后，只有第一行生效，其他行的所有列都text-left包括不应该的第一列。所以为什么？我必须用方法迭代tr元素吗？each

4

2 回答 2

4

您当前的 jQuery 代码将获得所有td's 然后获得第一个集合...您拥有这个td's 集合然后您获得该集合中的第一个...这就是您当前代码中发生的情况...

用这个替换你的代码......

$(function(){
    $("input[type='button']").on("click", function(){
        $("#table tr td").not(':first-child').css({"text-align":"left"}); 
    });

});

更好的是，如果你可以使用 css....

table td{
    border: 1px solid red;
    text-align: left;
}

table td:first-child {
    text-align: center;
}
于 2013-03-21T03:35:39.530 回答
0

使用:not或.not()和:first。

$('#table tr td:not(#table tr td:first)').css({"text-align":"left"});

或者

$('table tr td').not(':first').css({"text-align":"left"});
于 2013-03-21T03:38:06.870 回答