To achieve the goal of making all columns except the first of a row in a table to have a text alignment of left (with the first column having a defined text alignment in CSS), the following code is utilized:
<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>
Upon clicking the button, only the first row is affected by the click event. The other rows have all columns aligned to the left, including the first column which should not be. The question arises - why is this happening? Is it necessary to iterate through the tr elements using the each method?