changing every 2 rows the tr background color

Question

ofir0803 0 Light Poster

13 Years Ago

Hi

I have this code of zebra stripes.

<style type="text/css">
<!--
.paint {background: #caf2fe;}
-->
</style>
<script type="text/javascript">
 $(document).ready(function(){
 $("tr:odd").addClass("paint");
 
 });
</script>
 <table cellpadding="0" cellspacing="0" width="100%"> 
<tr> 
	<td>Text1</td>     	
</tr>  
<tr> 
	<td>Text1 details</td> 
</tr> 
<tr> 
	<td>Text2</td> 
</tr>  
<tr> 
	<td>Text2 details</td> 
</tr> 
 <tr> 
	<td>Text3</td> 
</tr> 
<tr> 
	<td>Text3 details</td> 
</tr> 
</table>

how can i change every 2 rows the background color?

html-css javascript jquery

4 Contributors
9 Replies
1K Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by twiss

twiss 155 Veteran Poster

13 Years Ago

You'll need to
- loop through all the rows
- do something with a counter (+= .5, or just ++, whatever you prefer)
- figure if you need to paint it :)

stbuchok

13 Years Ago

Please checkout this link: http://api.jquery.com/nth-child-selector/

twiss 155 Veteran Poster

13 Years Ago

Yes, that's also a possibility. You'll want 4n+1 and 4n+2, something like that, I think.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ofir0803 0 Light Poster · Answer 1 · 2011-06-28T13:30:27+00:00

Please checkout this link: http://api.jquery.com/nth-child-selector/

thank's i will try it ant let you know...

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 2 · 2011-06-28T15:32:54+00:00

ofir,

Your code looks like it should work providing jquery is installed on the page.

The version below applies zebra stripes only to tables with class="zebraStripes" , and applies the :odd selector more efficiently.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
.paint { background-color: #caf2fe; }
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("table.zebraStipes tr").filter(":odd").addClass("paint");
});
</script>
</head>

<body>

<table class="zebraStipes" cellpadding="0" cellspacing="0" width="100%"> 
<tr><td>Text1</td></tr>
<tr><td>Text1 details</td></tr> 
<tr><td>Text2</td></tr>  
<tr><td>Text2 details</td></tr> 
<tr><td>Text3</td></tr> 
<tr><td>Text3 details</td></tr> 
</table>

</body>
</html>

ofir0803 0 Light Poster · Answer 3 · 2011-06-28T17:14:49+00:00

ofir,

Your code looks like it should work providing jquery is installed on the page.

The version below applies zebra stripes only to tables with class="zebraStripes" , and applies the :odd selector more efficiently.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
.paint { background-color: #caf2fe; }
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("table.zebraStipes tr").filter(":odd").addClass("paint");
});
</script>
</head>

<body>

<table class="zebraStipes" cellpadding="0" cellspacing="0" width="100%"> 
<tr><td>Text1</td></tr>
<tr><td>Text1 details</td></tr> 
<tr><td>Text2</td></tr>  
<tr><td>Text2 details</td></tr> 
<tr><td>Text3</td></tr> 
<tr><td>Text3 details</td></tr> 
</table>

</body>
</html>

But I want double zebra strips
like:
rows 1 and 2 - red
rows 3 and 4 - blue
rows 5 and 6 - red
rows 7 and 8 - blue

stbuchok · Answer 4 · 2011-06-28T17:32:36+00:00

Please take a look at the following code (tested and working):

<html>
<head>

	<link type="text/css" href="css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

	<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>

<script type="text/javascript">
		$(function() {

			$('#myTable tr:nth-child(4n+1)').css({'background-color': 'red'});
			$('#myTable tr:nth-child(4n+2)').css({'background-color': 'red'});
			$('#myTable tr:nth-child(4n+3)').css({'background-color': 'blue'});
			$('#myTable tr:nth-child(4n+4)').css({'background-color': 'blue'});

		});


	</script>

</head>
<body>

<table id="myTable">
	<tr>
		<td>1
		</td>
		<td>1
		</td>
	</tr>
	<tr>
		<td>2
		</td>
		<td>2
		</td>
	</tr>
	<tr>
		<td>3
		</td>
		<td>3
		</td>
	</tr>
	<tr>
		<td>4
		</td>
		<td>4
		</td>
	</tr>
	<tr>
		<td>5
		</td>
		<td>5
		</td>
	</tr>
	<tr>
		<td>6
		</td>
		<td>6
		</td>
	</tr>
	<tr>
		<td>7
		</td>
		<td>7
		</td>
	</tr>
	<tr>
		<td>8
		</td>
		<td>8
		</td>
	</tr>
	<tr>
		<td>9
		</td>
		<td>9
		</td>
	</tr>
	<tr>
		<td>10
		</td>
		<td>10
		</td>
	</tr>
	<tr>
		<td>11
		</td>
		<td>11
		</td>
	</tr>
	<tr>
		<td>12
		</td>
		<td>12
		</td>
	</tr>
	<tr>
		<td>13
		</td>
		<td>13
		</td>
	</tr>
	<tr>
		<td>14
		</td>
		<td>14
		</td>
	</tr>
</table>

</body>
</html>

ofir0803 0 Light Poster · Answer 5 · 2011-06-28T17:52:45+00:00

Please take a look at the following code (tested and working):

<html>
<head>

	<link type="text/css" href="css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

	<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>

<script type="text/javascript">
		$(function() {

			$('#myTable tr:nth-child(4n+1)').css({'background-color': 'red'});
			$('#myTable tr:nth-child(4n+2)').css({'background-color': 'red'});
			$('#myTable tr:nth-child(4n+3)').css({'background-color': 'blue'});
			$('#myTable tr:nth-child(4n+4)').css({'background-color': 'blue'});

		});


	</script>

</head>
<body>

<table id="myTable">
	<tr>
		<td>1
		</td>
		<td>1
		</td>
	</tr>
	<tr>
		<td>2
		</td>
		<td>2
		</td>
	</tr>
	<tr>
		<td>3
		</td>
		<td>3
		</td>
	</tr>
	<tr>
		<td>4
		</td>
		<td>4
		</td>
	</tr>
	<tr>
		<td>5
		</td>
		<td>5
		</td>
	</tr>
	<tr>
		<td>6
		</td>
		<td>6
		</td>
	</tr>
	<tr>
		<td>7
		</td>
		<td>7
		</td>
	</tr>
	<tr>
		<td>8
		</td>
		<td>8
		</td>
	</tr>
	<tr>
		<td>9
		</td>
		<td>9
		</td>
	</tr>
	<tr>
		<td>10
		</td>
		<td>10
		</td>
	</tr>
	<tr>
		<td>11
		</td>
		<td>11
		</td>
	</tr>
	<tr>
		<td>12
		</td>
		<td>12
		</td>
	</tr>
	<tr>
		<td>13
		</td>
		<td>13
		</td>
	</tr>
	<tr>
		<td>14
		</td>
		<td>14
		</td>
	</tr>
</table>

</body>
</html>

thank's thank's thank's :)
it's working fine

$("table#listings tr:nth-child(4n+2)").addClass("paint");
$("table#listings tr:nth-child(4n+3)").addClass("paint");
$("table#listings tr:nth-child(4n+4)").addClass("paint2");
$("table#listings tr:nth-child(4n+5)").addClass("paint2");

twiss 155 Veteran Poster · Answer 6 · 2011-06-28T18:25:20+00:00

I think you could write that a bit more efficiently like this:

$("#listings tr").filter(':nth-child(4n+2), :nth-child(4n+3)').addClass("paint");
$("#listings tr").filter(':nth-child(4n), :nth-child(4n+1)').addClass("paint2");