用JSTL标准标签库定义一个九九乘法表(设置表格颜色间隔)

本文介绍如何使用JSTL标签库中的<c:forEach>标签来实现九九乘法表的输出，并展示了具体的代码实现及样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

九九乘法表的输出是一个很经典的循环输出例子，从接触编码开始，就在不断地学习。那么在jstl标签库中怎么进行这个例子输出呢？

在jstl中用到了<c:forEach>迭代标签，首先了解一下forEach标签吧：forEach包含的属性：var，items，varStatus，begin，end，step

[html] view plain copy print ?

<c:forEach [var=”varName”]items=”collection” [varStatus=”varStatusName”] [begin=”begin”] [end=”end”] [step=”step”]></c:forEach>

<c:forEach [var=”varName”]items=”collection” [varStatus=”varStatusName”] [begin=”begin”] [end=”end”] [step=”step”]></c:forEach>

详细解释：

[]包括的内容是可有可无的，没有[]包含的表示必须要写的属性

var:不支持el表达式，是String字符串类型，作用是决定是否处理标签体内容；

items：支持el表达式，可以是数组、字符串和各种集合类型，放置将要迭代的集合对象

varStatus：不支持el表达式，是String字符串类型，表示迭代的状态，可以获得迭代自身的信息

begin：支持el表达式，int型，如果指定begin属性，就从item下表为begin的位置开始迭代，相当于for循环里的=赋值；若没有指定begin属性，就从0下标开始迭代

end：支持el表达式，int型，如果指定end属性，就在item下标为end的位置结束迭代,相当于for循环里的<=；若没有指定end属性，将迭代到item最后位置

step：支持el表达式，int型，默认的步长是1，相当于for循环里的++。如果指定step属性值，就把指定值作为步长

java中的九九乘法表输出代码：

[java] view plain copy print ?

for (int i =1; i <= 9; i++) {
for(int j=1;j<=i;j++){
int k=i*j;
System.out.print(j+"*"+i+"="+k+"\t");
}
System.out.println("\n");
}

   for (int i = 1; i <= 9; i++) {

           for(int j=1;j<=i;j++){

              int k=i*j;

              System.out.print(j+"*"+i+"="+k+"\t");

           }

           System.out.println("\n");

       }

用jstl标签写的代码，并输入表格：

[html] view plain copy print ?

<tablewidth="60%">
<c:forEachvar="itemi"begin="1"end="9"varStatus="status">
<tr>
<c:forEachvar="itemj"begin="1"end="${itemi}"varStatus="status">
<td>
<c:outvalue="${itemj}*${itemi}=${itemi*itemj}"></c:out>
</td>
</c:forEach>
</tr>
</c:forEach>
</table>

   <table width="60%">

       <!-- 循环输出1~9之间的数字 -->

       <!-- varStatus判断迭代次数 -->

       <c:forEach var="itemi"begin="1" end="9"varStatus="status">

           <tr>

           <c:forEach var="itemj"begin="1" end="${itemi}"varStatus="status">

              <td>

              <c:out value="${itemj}*${itemi}=${itemi*itemj}"></c:out>

              </td>

              </c:forEach>

           </tr>

           </c:forEach>

       </table>

添加颜色间隔的css文件：

[html] view plain copy print ?

<styletype="text/css">
.even {
background-color: red
}
.odd {
background-color: yellow
}
tr:hover {
background-color: blue
}
</style>

   <!-- 设置间隔颜色 -->

    <style type="text/css">

    .even {

    background-color: red

    }

 

    .odd {

    background-color: yellow

    }

    
   <!--鼠标移动到时，显示的颜色-->
    tr:hover {

    background-color: blue

    }

    </style>

将css代码添加到表格中：

[html] view plain copy print ?

<!--三目运算符的使用，迭代偶数次时，该行显示odd的颜色；迭代奇数次时，该行显示even的颜色-->

[html] view plain copy print ?

<trclass="${status.count%2==0?'odd':'even'}">

<tr class="${status.count%2==0?'odd':'even'}">

运行的效果图：