I have a html table output having 20 rows (fixed).
<% for loop {............%>
<tr>
<td>
Value 1
</td>
<td>
<%= value1 %>
</td>
</tr>
<tr>
<td>
Value 2
</td>
<td>
<%= value2 %>
</td>
</tr>
<tr>
<td>
Value 3
</td>
<td>
<%= value3 %>
</td>
</tr>
<% } %>
..............goes until value 20. Instead to hard code each row color in each TR, I want to build some logic to display row color in blue/white alternatively.
Any idea?
You want to alternate rows? You can use a boolean toggle. Here are some examples:
for (int i = 0; i < list.size(); i++) {
if (i % 2 == 0) {
// blue
} else {
// white
}
// or
String color = (i % 2 == 0) ? "blue" : "white";
}
or:
boolean blue = true;
for ( ... ) {
if (blue) {
// blue
blue = !blue;
} else {
// white
}
// or
String color = blue ? "blue" : "white";
blue = !blue;
}
Please find the example for the alternate color, this will work not only for fixed table size but also for dynamic table size...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="Javascript">
function alternate(id) {
if(document.getElementsByTagName) {
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 1; i < rows.length; i++) {
//manipulate rows
if(i % 2 == 0)
rows[i].className = "even";
else
rows[i].className = "odd";
}
}
}
</script>
<style type="text/css">
.odd{background-color: '#EEEDF0';}
.even{background-color: '#DFE8F2';}
</style>
</HEAD>
<BODY onLoad="alternate('theTable')" bgcolor="#EEEDF0" >
<u>This is an example of alternating row colors:</ul>
<table id="theTable" cellspacing="0" cellpadding="0" >
<tr bgcolor="#BECFDA">
<td>Vehicle Model</td>
<td width="50"></td>
<td>Account Number</td>
<td width="50"></td>
<td>Status</td>
<td width="50"></td>
<td>Amount</td>
</tr>
<tr>
<td>2003 XRS</td>
<td width="50"></td>
<td>345334254</td>
<td width="50"></td>
<td>Processing</td>
<td width="50"></td>
<td>$243.21</td>
</tr>
<tr>
<td>2003 TRY</td>
<td width="50"></td>
<td>11098544</td>
<td width="50"></td>
<td>Processing</td>
<td width="50"></td>
<td>$481.21</td>
</tr>
<tr>
<td>2003 FRS</td>
<td width="50"></td>
<td>345334254</td>
<td width="50"></td>
<td>Processing</td>
<td width="50"></td>
<td>$50</td>
</tr>
</table>
</BODY>
</HTML>
-Bala
