jQuery selectors for even/odd rows in a table
The code in the first Code Block is the source code. After the source code is running. The code will be changed (See the 2nd Code Block).
I want the class(i.e. 'even' and 'odd') of tag is only displayed in the 'table1'. However, currently a nest table (i.e. 'table2') also has 'even' and 'odd' class of each tag.
Can anyone help me out? Thanks in advance.
-----------First Code Block--------------
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#table1 tr:odd").addClass("odd");
$("#table1 tr:not(.odd)").addClass("even");
});
</script>
</head>
<body>
<table id="table1">
<tr>
<td>AAA</td>
<td>CCC</td>
</tr>
<tr>
<td>BBB</td>
<td>DDD</td>
</tr>
<tr>
<td>
<table id="table2">
<tr></tr>
<tr></tr>
<table>
</td>
</tr>
</table>
</body>
-----------2nd Code Block---------------
<table id="table1">
<tr class="even">
<td>AAA</td>
<td>CCC</td>
</tr>
<tr class="odd">
<td>BBB</td>
<td>DDD</td>
</tr>
<tr class="even">
<td>
<table id="table2">
<tr class="even">开发者_JAVA技巧;</tr>
<tr class="odd"></tr>
<table>
</td>
</tr>
</table>
All of the posted answer are almost right..
$(document).ready(function(){
$("#table1 > tbody > tr:odd").addClass("odd");
$("#table1 > tbody > tr:not(.odd)").addClass("even");
});
Many browsers automatically add a tbody to your table even if you don't add one yourself. So #table1 > tr will not match because tr is not a direct child of table. Your best bet is to use the above and explicitly add a tbody for those browsers that don't do it for you.
<table id="table1">
<tbody>
<tr class="even">
<td>AAA</td>
<td>CCC</td>
</tr>
<tr class="odd">
<td>BBB</td>
<td>DDD</td>
</tr>
<tr class="even">
<td>
<table id="table2">
<tbody>
<tr class="even"></tr>
<tr class="odd"></tr>
</tbody>
<table>
</td>
</tr>
<tbody>
</table>
http://jsfiddle.net/5ETAD/1/
It should be:
$("#table1>tr:odd").addClass("odd");
$("#table1>tr:not(.odd)").addClass("even");
To avoid redundant DOM traversal, you could use something like this:
$('#table1 > tbody')
.filter('tr:odd').addClass('odd')
.end() //break chain and return to the original tbody element
.filter('tr:even').addClass('even')
You could use the following (notice the greater than sign):
$(document).ready(function(){
$("#table1 > tr:odd").addClass("odd");
$("#table1 > tr:not(.odd)").addClass("even");
});
This will select only the immediate children tr's.
Use the direct child selector.
Also you can use :even instead of :not(.odd)
$(document).ready(function(){
$("#table1 > tr:odd").addClass("odd");
$("#table1 > tr:even").addClass("even");
});
$("#table1 > tr:odd").addClass("odd");
$("#table1 > tr:not(.odd)").addClass("even");
You just need to use proper CSS selectors. Try:
$("#table1>tr:odd").addClass("odd");
加载中,请稍侯......
精彩评论