jsp alternate table rows

shragi
shragi used Ask the Experts™
on
Hi - I am trying to display different backgrounds for alternate rows, so I updated the jsp as below and it did not work,
so what should i change.
<table class="tblcompare">
<tbody>
<c:forEach items="${orgRiskMap}" var="orgRiskMap">                                    
      <c:forEach var="riskForm" items="${orgRiskMap.value}" varStatus="loop">
                  <tr class="${loop.index % 2 == 0 ? 'even' : 'odd'}">
                        <td class="cellfeat">${riskForm.getRiskDescription()}</td>
                        <td>${riskForm.getRiskCreatedDate()}</td>
                        <td>${riskForm.getRiskLevelId()}</td>
                        <td>${riskForm.getRiskOwner()}</td>
                        <td></td>
                        <td></td>
                  </tr>
      </c:forEach>                                                      
</c:forEach>
</tbody>
 </table>

and css file is like below

.tblcompare tbody tr.odd td {
      background: #efefef;
}

.tblcompare tbody tr td.cellfeat, .tblcompare tbody tr.odd td.cellfeat {
      background: #dcdcdc;
      padding: 2px 0 2px 10px;
      font-size: 1.2em;
      font-weight: bold;
      color: #444;
      text-align: left;
}
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Expert of the Year 2008
Top Expert 2008
Commented:
Try:
.tblcompare tbody tr td {
      background: #dcdcdc;
      padding: 2px 0 2px 10px;
      font-size: 1.2em;
      font-weight: bold;
      color: #444;
      text-align: left;
}

.tblcompare tbody tr.odd td {
      background: #efefef;
}

Open in new window


If you only care about browser with CSS3 support, you could simply use:
td:nth-of-type(odd) {
  background-color:#efefef;
}
td:nth-of-type(even) {
  background-color:#dcdcdc;
}

Open in new window

http://webdesign.about.com/od/css3/qt/alternating-row-styles-tables.htm
shragi

Author

Commented:
The solutions did not work.
But if i write something like below it is working so I need a variable where I can set class = "odd" or class as nothing

<tbody>
<c:forEach items="${orgRiskMap}" var="orgRiskMap">                                    
      <c:forEach var="riskForm" items="${orgRiskMap.value}" varStatus="loop">
                  <tr class="odd">
                        <td class="cellfeat">${riskForm.getRiskDescription()}</td>
                        <td>${riskForm.getRiskCreatedDate()}</td>
                        <td>${riskForm.getRiskLevelId()}</td>
                        <td>${riskForm.getRiskOwner()}</td>
                        <td></td>
                        <td></td>
                  </tr>
                  <tr>
                                      <td class="cellfeat">24H Support</td>
                                      <td><img src="images/icon_20.png" alt="No" /></td>
                                      <td><img src="images/icon_9.png" alt="Yes" /></td>
                                      <td><img src="images/icon_9.png" alt="Yes" /></td>
                                  </tr>
      </c:forEach>                                                      
</c:forEach>
</tbody>
shragi

Author

Commented:
fixed with jquery

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});
hielo
Expert of the Year 2008
Top Expert 2008

Commented:
Try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
tbody tr td {
  background-color:#efefef;
}
tbody tr.odd td{
  background-color:lightgreen;
}
-->
</style>

</head>
<body>
<table summary="">
<thead>
<tr>
	<th>A</th>
	<th>B</th>
	<th>C</th>
	<th>D</th>
	<th>E</th>
	<th>F</th>
</tr>

</thead>
<tbody>
<c:forEach items="${orgRiskMap}" var="orgRiskMap">                                    
      <c:forEach var="riskForm" items="${orgRiskMap.value}" varStatus="loop">
                  <tr class="odd">
                        <td class="cellfeat">${riskForm.getRiskDescription()}</td>
                        <td>${riskForm.getRiskCreatedDate()}</td>
                        <td>${riskForm.getRiskLevelId()}</td>
                        <td>${riskForm.getRiskOwner()}</td>
                        <td></td>
                        <td></td>
                  </tr>
                  <tr>
                                      <td class="cellfeat">24H Support</td>
                                      <td><img src="images/icon_20.png" alt="No" /></td>
                                      <td><img src="images/icon_9.png" alt="Yes" /></td>
                                      <td><img src="images/icon_9.png" alt="Yes" /></td>
                                      <td></td>
                                      <td></td>
                                  </tr>
      </c:forEach>                                                      
</c:forEach>
</tbody>
</table>
</body>
</html>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial