How to Alternate HTML Table Row Colors Using Jsp

How to alternate HTML table row colors using JSP?

Use the varStatus attribute on your forEach tag and JSTL will manage an instance of a javax.servlet.jsp.jstl.core.LoopTagStatus for you in the variable name you specify.

You can then use a ternary operator to easily output the appropriate class name:

<c:forEach items="${element}" var="myCollection" varStatus="loopStatus">
  <tr class="${loopStatus.index % 2 == 0 ? 'even' : 'odd'}">
    ...
  </tr>
</c:forEach>

This JSTL primer from IBM has more information about the core tag library and what it gives you.

Alternating table row color?

If you can use JSTL (much similar to Java-like solution, but better),

<c:forEach var="myItem" items="${myCollection}" varStatus="loop">
<tr class="${loop.index % 2 == 0 ? 'even' : 'odd'}">
...
</tr>
</c:forEach>

Now have the CSS classes to define colors or other styles.

You can also consider using 'display' tag which does the same thing in server side or jQuery on client side to select rows with odd, even selectors and add the classes.

Change the color of the table row based on the value from sercer

you can simply use an if statement

 <%
        String selectedItem = "";
        List<Employee> list = new ArrayList<Employee>();

        PhoneListController controller = new PhoneListController();
         list = controller.getAllContacts();
        }
        for (Employee eachEmp : list) {

          if (eachEmp.getManagerCode==1) {    %>
        <tr class="red">
       <% }   else   {   %>
       <tr class="blue">
       <%   }    %>

            <td><%=eachEmp.getLast()%></td>
            <td><%=eachEmp.getFirst()%></td>
            <td><%=eachEmp.getExt()%></td>
            <td><%=eachEmp.getLoc()%></td>
            <td><%=eachEmp.getCell()%></td>
            <td><%=eachEmp.getTeam1()%></td>
        </tr>

<% } %> 

Or if you don't want to use css class you can simply write etc.. etc..

you can put how many if you want, or use the switch statement

Table row - Giving alternate colors

You can also try without CSS, its simple.

Code:

    **var rowCount = document.getElementById("tableID").rows.length;
    var row = table.insertRow(rowCount);
        var cell1 = row.insertCell(0);
        cell1.style.backgroundColor = "yellow";
                    cell1.innerHTML = "hey";
                    var cell2 = row.insertCell(1);
        cell2.style.backgroundColor = "green";
                    cell2.innerHTML = "hello";**

Here its creating dynamically row for the table and filling different color to coloumns.

hope this help..!!
Thanks

How to alternate table row background colors with JSTL?

Use <c:forEach> with a varStatus and some lines of CSS.

<table>
    <thead>
        <tr>
            <th>header1</th>
            <th>header2</th>
            <th>header3</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach items="${bean.list}" var="item" varStatus="loop">
            <tr class="${loop.index % 2 == 0 ? 'even' : 'odd'}">
                <td>${item.property1}</td>
                <td>${item.property2}</td>
                <td>${item.property3}</td>
            </tr>
        </c:forEach>
    <tbody>
</table>

with CSS

tr.even { background: red; }
tr.odd { background: white; }

In the above example, the header is just separated from the body. When the table row index in the body is a multiple of 2 (even), then it get class="even", otherwise class="odd" (open page in browser, rightclick it and View Source to see it yourself). With CSS you can just control the style of the invididual elements. To give the header row a blue background, just add

thead tr { background: blue; }

Alternating colors in HTML table rows doesn't work

The way you are doing should work as nothing is wrong, it can be related to specificity like say you are using a class, but some other rule is more specific like

#demo table tr {
    background: #fff;
}

Demo FAILS (Specificity matters)

So in the above example, though the classes are applied and trshould take the background, it won't take as you must have declared a more specific rule before, or lets say you are using !important. You can inspect the element and see what color is applied from which selector/rule.

Also if you want to save your markup to a great extent, you can simply use the CSS below, which will apply to odd and even rows of your table, without declaring classes, like

table tr:nth-child(odd) {
  background: #f00;
}

table tr:nth-child(even) {
  background: #000;
}

Demo

alternating applying class to tr

Instead of doing it in jstl you can do this in CSS or jQuery.

CSS3 has a :nth-child(arg) pseudo-class which allows us to control the display of alternate rows. But this is only supported in modern browser, so cross-browser compatibility can be an issue with this.

tr:nth-child(odd)    { background-color:#ffffff; }
tr:nth-child(even)    { background-color:#000000; }

Or in jQuery:

$("tr:odd").css("background-color", "#ffffff");
$("tr:even").addClass("evenRowClass");

How to change color of a cell in HTML table using JSoup?

row.getElementsByTag("td").get(1) returns an Element, which doesn't have a class method.

Though, it has a classNames method, and that accepts a Set<String> as a parameter (even if you just need to pass a single class).

So you can do something like

row.getElementsByTag("td").get(1).classNames(Set.of("highlight-#57d9a3"));

And so on.

Aside from that compilation error, if(status == "Pass") is not how you compare strings in java. You need to do something like if("Pass".equals(status)).

---

Related Topics