Displaying Alternate Colours in Alternate Rows
Hi, im pretty sure this is more of a HTML question than a jstl one, but I thought id try and see if someone here had a solution. Basically ,as the title says, I just want to display alternate colours in alternate rows. For example the first row would be beige and the next white and they would alternate all the way down. My code is as follows;
<%@ include file="/WEB-INF/jsp/include.jsp" %>
<html>
<head>
<title>Online Butty Shop</title>
<link REL="STYLESHEET" TYPE="text/css" HREF="resources/default.css">
</head>
<body>
<h4><a href="<core:url value="main.htm"/>">Sandwich Orders</a></h4>
<table>
<tr bgcolor="#abff99">
<th>ID</th>
<th>BREAD</th>
<th>SREAD</th>
<th>FIRST FILLING</th>
<th>SECOND FILLING</th>
<th>EXTRA FILLINGS</th>
<th>SEASONINGS</th>
<th>ORDERED ON</th>
<th>ORDERED BY</th>
<th>PRINTED</th>
</tr>
<core:forEach var="s" items="${Sandwiches}">
<tr bgcolor="#ffffdd">
<td>null</td>
<td><core:out value="${s.bread}"/></td>
<td><core:out value="${s.spread}"/></td>
<td><core:out value="${s.baseFilling}"/></td>
<td><core:out value="${s.secondFilling}"/></td>
<td><core:out value="${s.extraFillings}"/></td>
<td><core:out value="${s.seasonings}"/>
</td>
<td>null</td>
<td>null</td>
<td>null</td>
<tr>
</core:forEach>
</tr>
</table>
</body>
</html>
Any ideas would be very much appreciated. Thank You.
# 1
you'll want to use the varStatus attribute on the forEach action. See the [url http://java.sun.com/products/jsp/jstl/1.1/docs/tlddocs/index.html]API docs[/url]
Then, use the varStatus variable like this (assumes you named it 'status'):
<tr bgcolor="${status.index % 2 == 0 ? 'white' : 'beige'}">
...
</tr>
Though, you really should use CSS instead of the html attributes for styles.
# 2
I used the code;
<code>
<core:forEach var="s" items="${Sandwiches}" varStatus="status">
<tr bgcolor="${status.index % 2 == 0 ? 'white' : 'beige'}">
<td><center>null</td>
<td><core:out value="${s.bread}"/></td>
<td><core:out value="${s.spread}"/></td>
<td><core:out value="${s.baseFilling}"/></td>
<td><core:out value="${s.secondFilling}"/></td>
<td><core:out value="${s.extraFillings}"/></td>
<td><core:out value="${s.seasonings}"/></center></td>
<td><center>null</td>
<td>null</td>
<td>null</center></td>
<tr>
</code>
And all it does is colour all the cells in the table dark green. Why is that?
Message was edited by:
DontKnowJack
# 3
This method does not work. Does anyone have a suggestion as to why?
# 4
The code you posted does not turn the cells green. Therefore, the table is green due to some other code that you haven't posted. Do you have any javascript or CSS running on your page?
# 5
I dont have any javascript running but I do have a CSS. It is as follows;
@CHARSET "UTF-8";
BODY {
COLOR: #000000;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10pt;
MARGIN: 8px
}
P {
COLOR: #000000;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10pt;
}
H1 {
COLOR: #FFFFFF;
BACKGROUND: #339999;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 12;
MARGIN: 0;
PADDING: 10;
TEXT-TRANSFORM: UPPERCASE;
FONT-WEIGHT: BOLD;
}
H2 {
COLOR: #000000;
BACKGROUND: #ddddff;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 12;
MARGIN: 10;
PADDING: 10;
TEXT-TRANSFORM: UPPERCASE;
FONT-WEIGHT: BOLD;
}
H3 {
COLOR: #000000;
BACKGROUND: #FFFFFF;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 14;
MARGIN: 0;
PADDING: 0;
TEXT-TRANSFORM: UPPERCASE;
FONT-WEIGHT: BOLD;
}
H4 {
COLOR: #FFFFFF;
BACKGROUND: #339999;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 11;
MARGIN: 0;
PADDING: 2;
TEXT-TRANSFORM: UPPERCASE;
FONT-WEIGHT: BOLD;
}
H5 {
COLOR: #FFFFFF;
BACKGROUND: #339999;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 11;
MARGIN: 0;
PADDING: 2;
FONT-WEIGHT: BOLD;
}
H6 {
COLOR: #000000;
BACKGROUND: #ddddff;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 11;
MARGIN: 0;
PADDING: 2;
TEXT-TRANSFORM: UPPERCASE;
FONT-WEIGHT: BOLD;
}
A {
COLOR: #000000/*#339999*/;
}
A:visited {
COLOR: #000000/*#339999*/;
}
A:hover {
COLOR: #000000/*#339999*/;
}
TD {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px;
}
However even when I remove the style sheet, it still displays the same colour.
# 6
I would suggest that you view the source code in the browser, copy the relevant piece of code out and paste it into a separate html file. Open that html file in a new browser window and see if the problem persists. Play with that html file to get it to work right and then post what you find. This is the easiest way to isolate the problem.
# 7
I copied and pasted the source from the firefox browser the resulting html code. Then I placed it into a separate file. Shown below as follows;
<html>
<head>
<title>Online Butty Shop</title>
</head>
<body>
sdgdfgfg
<h4><a href="main.htm">Sandwich Orders</a></h4>
<center>
<table border = "1" width="100%">
<th>ID</th>
<th>BREAD</th>
<th>SREAD</th>
<th>FIRST FILLING</th>
<th>SECOND FILLING</th>
<th>EXTRA FILLINGS</th>
<th>SEASONINGS</th>
<th>ORDERED ON</th>
<th>ORDERED BY</th>
<th>PRINTED</th>
</tr>
<tr bgcolor="${status.index % 2 == 0 ? 'white' : 'beige'}">
<td><center>null</td>
<td>Sliced Granary Bloomer White</td>
<td>Flora</td>
<td>Turkey</td>
<td>Turkey</td>
<td>[Pineapple, Sweetcorn, Cucumber, Beetroot, Sliced Onion]</td>
<td>[Cranberry Sauce, Pepper, Salt]</center></td>
<td><center>null</td>
<td>null</td>
<td>null</center></td>
<tr>
<tr bgcolor="${status.index % 2 == 0 ? 'black' : 'black'}">
<td><center>null</td>
<td>Granary Roll</td>
<td>Mayo</td>
<td>Tuna</td>
<td>Turkey</td>
<td>[Pineapple, Sweetcorn, Cucumber, Beetroot, Sliced Onion]</td>
<td>[Prawn Cocktail Sauce, Pepper, Mayo]</center></td>
<td><center>null</td>
<td>null</td>
<td>null</center></td>
<tr>
<tr bgcolor="${status.index % 2 == 0 ? 'white' : 'beige'}">
<td><center>null</td>
<td>Crusty Herb Roll</td>
<td>Mayo</td>
<td>Turkey</td>
<td>Tuna</td>
<td>[Pineapple, Sweetcorn, Cucumber, Beetroot, Sliced Onion]</td>
<td>[Prawn Cocktail Sauce, Mustard, Salt]</center></td>
<td><center>null</td>
<td>null</td>
<td>null</center></td>
<tr>
</table>
</center>
</body>
</html>
Than I opened that file in firefox browser. I had the exact same problem, all the rows were coming up as green. So i tried in safari and the rows came up black. I removed the code
<tr bgcolor="${status.index % 2 == 0 ? 'white' : 'beige'}">
from the source and the rows returned to white on both browsers. So it is obviously something to do with the browser not recognizing the above code. However I am not very familiar with jsp so can someone tell me why the about is not working.
# 8
You should not see that code at all in the browser. All you should see is:
<tr bgcolor="white">...
// or
<tr bgcolor="beige">...
So, something must be wrong with your JSP page or the JSP compilation. Most likely, you're including the tag library incorrectly or using it incorrectly. I noticed you're using the prefix "core:" for the "forEach" action. The standard prefix for that tag library is "c:" so unless you overrode the prefix that could be your problem.
# 9
I have overridden the standard prefix for the java standard tag library. An include file, referenced at the top of my jsp, overrides the prefix with the following code;
<%@ taglib prefix="core" uri="http://java.sun.com/jstl/core" %>
other commands that use that taglib like the forEach action seem to work okay. What else could it be?
# 10
what servlet container are you using? Tomcat? What version?
# 11
Im actually using the latest version of Jetty
# 12
Went to Jetty's site, then went to their [url http://docs.codehaus.org/display/JETTY/Jetty+Documentation]documentation[/url]. Scrolled down to Troubleshooting, and found [url http://docs.codehaus.org/display/JETTY/JSP+expression+do+not+evaluate]JSP expression do not evaluate[/url].
# 13
> Went to Jetty's site, then went to their [url
> http://docs.codehaus.org/display/JETTY/Jetty+Documenta
> tion]documentation[/url]. Scrolled down to
> Troubleshooting, and found [url
> http://docs.codehaus.org/display/JETTY/JSP+expression+
> do+not+evaluate]JSP expression do not evaluate[/url].
it says on the website to solve this you need to;
"The solution is to either use a 2.4 web.xml format or upgrade to use jasper 2.1 (simply running java5 should be sufficient for jetty to automatically select jasper 2.1 if the jars are present)."
I have java5 running on my machine so surely it should be working.
# 14
> it says on the website to solve this you need to;
>
> "The solution is to either use a 2.4 web.xml format
> or upgrade to use jasper 2.1 (simply running java5
> should be sufficient for jetty to automatically
> select jasper 2.1 if the jars are present)."
>
> I have java5 running on my machine so surely it
> should be working.
The other requirement stated is that you upgrade to Jaspre 2.1 and have the jars in the correct place. Is that the case?
