如何使列中除第一行之外的任何一行對齊？

我想使除表中第一行的所有列爲text-align:left，第一列爲css中定義的text-align。下面是代碼：如何使列中除第一行之外的任何一行對齊？

<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包括第一列這不應該。那麼爲什麼？我必須用each方法迭代tr元素嗎？

來源

2013-03-21 hiway

你目前的jQuery代碼將得到所有的td，然後得到第一個集合...你有td的這個集合，那麼你得到該集合中的第一個...這就是發生在你當前的事情代碼...

替換此代碼...

$(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-21 03:35:39 Reigel

非常感謝。但是你錯過'：not'，最終的代碼是這樣的：'$（「＃table tr td：not（：first-child）」）。css（{「text-align」：「left」}）' – hiway 2013-03-21 03:44:52

啊，我誤讀了你的頭銜.. ^^， – Reigel 2013-03-21 03:48:45

@HiwayChe，我加了更好的辦法... – Reigel 2013-03-21 03:52:36

使用: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-21 03:38:06

你的代碼和我有同樣的效果：除了第一行的第一行外，所有'td'都是'left'，這不是我想要的。不過謝謝你提醒我加上'not'。 – hiway 2013-03-21 03:46:33

@HiwayChe這就是爲什麼我添加第二，這將工作... – 2013-03-21 03:49:11

'：first'只是一樣'獲得（0）' – Reigel 2013-03-21 03:49:39

如何使列中除第一行之外的任何一行對齊？

回答

相關問題