topr8
msg:4456888 | 10:46 am on May 23, 2012 (gmt 0) |
nth child selector
something like:
tr:nth-child(odd) {
background-color:red;
}
not sure of browser support
|
lucy24
msg:4456890 | 10:52 am on May 23, 2012 (gmt 0) |
You're asking how to apply, say,
<tr class = "dark">
and
<tr class = "light">
to alternate rows without doing the whole thing manually?
I've done the identical thing with Regular Expressions. You just have to be a little consistent in your raw html layout, because random line breaks can cause problems. Basically you take something like
<tr>(\n<td.+\n<td.+\n {however many cells in a row} </tr>\n+)<tr>
and replace globally with
<tr class = "dark">$1<tr class = "light">
If you're rearranging an existing table the "find" part becomes
<tr(?: class = "\w+")?>
This is the exceptional RegEx that tends to work better if you do it as an unsupervised global replace, straight through from top to bottom.
|
StoutFiles
msg:4456919 | 12:18 pm on May 23, 2012 (gmt 0) |
Are the tables static? If they are generated dynamically you can just have a counter as you populate rows, switching back and forth on odd and even numbers.
while(table_populates)
{
if($odd)
$color = "white";
else
$color= "gray";
echo '<tr style="background-color:'.$color.';">';
}
|
BeeDeeDubbleU
msg:4456929 | 12:48 pm on May 23, 2012 (gmt 0) |
Thanks folks, I'll have a look at this but some of it is over my head.
.
|
Fotiman
msg:4456940 | 1:34 pm on May 23, 2012 (gmt 0) |
I second topr8 suggestion.
:nth-child unfortunately doesn't work in IE < 9, however, jQuery does support the :nth-child selector. So if you really need to have striped tables in IE < 9, you could use jQuery select :nth-child(odd) and apply a class/style to those elements.
|
Hoople
msg:4456976 | 3:04 pm on May 23, 2012 (gmt 0) |
Lots of info fodder found by searching "striped tables in IE".
Thanks to Fotiman for the phrase and +1 to topr8 as well.
Amongst the IE's several have issues. BeeDeeDubbleU your solution used may depend on the target browsers in use.
|
BeeDeeDubbleU
msg:4456985 | 3:15 pm on May 23, 2012 (gmt 0) |
All sounds a bit too complicated. :(
I think I'll just do it manually.
|
Fotiman
msg:4456992 | 3:26 pm on May 23, 2012 (gmt 0) |
It's not complicated at all.
<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(odd) {
background-color:red;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>1 - 1</td>
<td>1 - 2</td>
</tr>
<tr>
<td>2 - 1</td>
<td>2 - 2</td>
</tr>
<tr>
<td>3 - 1</td>
<td>3 - 2</td>
</tr>
<tr>
<td>4 - 1</td>
<td>4 - 2</td>
</tr>
</tbody>
</table>
</body>
</html>
|
|
|
Fotiman
msg:4456998 | 3:41 pm on May 23, 2012 (gmt 0) |
Note, you'd want to put the CSS in an external stylesheet. This will give you striped tables for all current browsers, but not IE8, IE7, or IE6 (if you still support any of those). If you want to go the jQuery route, there's a pretty detailed, but easy to follow tutorial:
[docs.jquery.com...]
|
topr8
msg:4456999 | 3:41 pm on May 23, 2012 (gmt 0) |
couldn't be more simple!
Fotiman got in before me! as he shows just add the style to the head or your style sheet and it will do it automatically! you could do this which would give your table alternate red and blue rows
<style>
tr:nth-child(odd) {background-color:red;}
tr:nth-child(even) {background-color:blue;}
</style>
|
Fotiman
msg:4457003 | 3:48 pm on May 23, 2012 (gmt 0) |
@topr8, or just this:
tr{background-color:blue;}
tr:nth-child(odd){background-color: red;}
:)
|
BeeDeeDubbleU
msg:4457022 | 4:53 pm on May 23, 2012 (gmt 0) |
Thanks guys. I now have it working and as you say it was dead easy.
|
topr8
msg:4457117 | 10:23 pm on May 23, 2012 (gmt 0) |
@Fotiman
indeed! yes of course, much better!
|
alt131
msg:4463941 | 2:57 pm on Jun 11, 2012 (gmt 0) |
I'm coming to this late but wanted to say what an enjoyable read this thread is. Plus foti, great job on getting BDW to try advanced selectors, and BDW, good on you for giving them a try!
For completeness I wanted to add a css solution rather than javascript for ie7&8. Both support :first-child as well as the "+" adjacent sibling selector. That allows you to use the first row as a start point for counting the ones that follow. It's effectively a manual implementation of nth-child, definitely not as elegant, but nicer than manually inserting classes, avoids javascript, and obvious so it's easy to remove when ceasing to support those versions.
tr {background-color:blue;}
tr:first-child + tr,
tr:first-child + tr + tr + tr,
tr:first-child + tr + tr + tr + tr + tr,
tr:first-child + tr + tr + tr + tr + tr + tr + tr {background-color:red} |
|
Keep the css neat to make it easy to scan/count the rows to identify where you are in the table, or if you want to avoid counting, just add two adjacent siblings to the previous selector.
|
|
