您的位置：首页 > Web前端 > JavaScript

How to create zebra stripes in JSP tables

2015-06-18 19:17 645 查看

It's been a long time since I worked on an old-school JSP (without the benefit of a framework like JSF or Struts), but I've wanted to add alternating row stripes ("zebra stripes") to some HTML tables in some old JSP's for a long time. I like tables with zebra stripes because they're easier to read, so now that I have some free time, I finally got this done.

Now that I have all of my JSP/CSS code working properly, I thought I'd share it all here in the form of a "recipe".

Problem

You want to create the effect of alternating row colors in an HTML table (i.e., "row stripes", or "zebra stripes") in a plain old JSP (i.e., using plain JSP syntax, without using a framework like JSF or Struts).

Solution

There are two parts to this solution, and neither one is too hard:

1.Alternate the CSS tags for your TR elements as you emit your TABLE HTML code.
2.Define your new even and odd CSS tags.

　　

I'll show you how I did this, and you can adapt the code as needed for your JSP code.

Adding the alternating CSS tags to your table

In my JSP code I followed a simple algorithm to emit the alternating CSS tags inside my

<tr>

tags. All I did was create a counter that was incremented each time a new table row was emitted, and then I used that counter and the modulus operator to determine whether I was emitting an even or odd row. When I emitted an even row I printed an

even

CSS tag, and when I emitted an odd row I printed an

odd

CSS tag.

The following JSP code snippet shows what I did. Here's a quick summary of what this code does:

First, I create three fields that I'll need later (

rowCounter

evenOddValue

, and

evenOdd

).

Second, I start emitting my table rows in a

while

loop. In increment the row counter, then use the modulus operator on the row counter to set the value of the

evenOddValue

variable to either

.

Third, when I actually emit the <tr> element, I emit it with a class that will either be named "even" or "odd". This value is pulled from my little

String

array named

evenOdd

, and is based on the

evenOddValue

.

Given that introduction, here's my JSP code:

// i have already emitted the <table> tag, and
// i'm just about to start emitting the <tr> and <td>
// tags.

// (1) fields we'll need shortly
int rowCounter = 0;                  // counts the number of rows emitted
int evenOddValue = 0;                // alternates between 0 and 1
String[] evenOdd = {"even", "odd"};  // two-element String array

// (2) start outputting the table rows
while ( listOfRows.hasNext() )
{
rowCounter++;

// set evenOddValue to 0 or 1 based on rowCounter
evenOddValue = 1;
if (rowCounter % 2 == 0) evenOddValue = 0;

// do whatever else you need to do ...
%>

<%-- (3) later in the code, emit the <tr> tag --%>
<%-- emit a class of either "even" or "odd" in the <tr> tag --%>
<tr class="<%=evenOdd[evenOddValue]%>">

　　

I hope that makes sense. I didn't want to print all of the JSP code in this area, because there are other complicated things going on that are unrelated to what I want to show here.

With this done, all we have to do now is define our CSS styles for the

even

and

odd

CSS styles.

Defining the CSS styles

I still have a lot to learn about CSS styling, but fortunately it's pretty easy to define a CSS style for my

even

and

odd

rows. In my case, because I emit my

<table>

with a class named

topics_table

, like this:

<table class="topics_table">

I need to reference that tag

topics_table

in my

even

and

odd

tag definitions.

That being said, all I had to do to get my alternating table row colors working was to create a style as shown below, and then include this style in the

<head>

section of my JSP:

<style type="text/css">
#topics_table tr.even td {
background-color: orange;
}
#topics_table tr.odd td {
background-color: yellow;
}
</style>

　　

Depending on how you have your CSS defined for your JSP, your tag definitions may be a little cleaner than what I have shown, but this is what I needed to do for my particular case.

Also, instead of including your CSS tags in the

<head>

section of your JSP/HTML, you'll probably want to move it out to a separate file, something like

styles.css

, but I was trying to keep my example simple here.

Finally, I didn't really stripe my tables using

orange

and

yellow

as shown above, but because the actual color shades I used are only slightly different, I wanted to make them more obvious here.

Summary

Creating alternating table row colors (zebra striping) is not too hard. There are two parts to the solution, and both parts are pretty easy:

Alternate the CSS tags for your

TR

elements as you emit your

<table>

HTML code.

Define your new

even

and

odd

CSS tags.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航