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

JavaScriptHTMLWeb Development

Last Comment

hielo

8/22/2022 - Mon

ASKER CERTIFIED SOLUTION

hielo

8/3/2015

Become an EE member today7-DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.

Not exactly the question you had in mind?

Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.

ask a question

shragi

8/11/2015

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

8/11/2015

ASKER

fixed with jquery

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

hielo

8/11/2015

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

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck