如何使每行中除第一列之外的列左对齐?

hiw*_*way 1 css jquery html-table

我想将表中除第一行之外的所有列设为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>
Run Code Online (Sandbox Code Playgroud)

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

Rei*_*gel 5

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

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

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

});
Run Code Online (Sandbox Code Playgroud)

如果你能使用 css 就更好了......

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

table td:first-child {
    text-align: center;
}
Run Code Online (Sandbox Code Playgroud)