Help with styling first three rows of a table
Hi guys,
I'm looking for a way with JQuery to style the first 3 rows of a table that is generated by PHP. The table is generated from a database on a loop. Now, I'm NOT looking for table-striping, I just want to style the first 3 rows of a table (in this case a scoreboard), the first gold, second silver and third bronze.
I've found a lot of ways to style an entire table using zebra plugins and other methods, but I'm only looking for a way to style the first 3 rows.
Here is some code I found here that is close to what I want, but styles the whole table instead of stopping:
http://www.exforsys.com/tutorials/jquer ... ttern.html
CSS:
-
tr.even,
tr.first {
background-color: #eee
}
tr.odd,
tr.second {
background-color: #ddd
}
tr.third {
background-color: #ccc
}
Script:
-
$(document).ready(function() {
var classNames = {
0: 'first',
1: 'second',
2: 'third'
}
$('table.striped tbody tr').not('[th]').each(function(index) {
$(this).addClass(classNames[index % 3])
})
})
Can someone help me find some way to stop after the first 3 rows of a table?