asked on

jsp alternate table rows

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;
}

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

shragi

ASKER

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

ASKER

fixed with jquery

$(document).ready(function()
{
$("tr:even").css("background-color", "#000000");
});

hielo

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