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
您当前的 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)