Avatar of shragi
shragi
Flag for India 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;
}
JavaScriptHTMLWeb Development

Avatar of undefined
Last Comment
hielo

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
hielo

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
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

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

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