使用JSTL动态生成表格Table

　　为了给用户更好的体验，在很多情况下，我们需要动态生成表格来实现表单的灵活性展示。有些人喜欢在后端代码动态创建HTML，来展现表格；也有的人喜欢在前端动态创建Table。因为表格Table本身是一种前端展示性HTML语言，所以我更喜欢使用前端语言动态创建表格。接下来，本文将展示如何使用JSTL动态创建表格。

　　现在先看一下，我们要实现的动态表格展示方式及有哪些数据可以使用。我们有一个两层的目录，目录结构如下：

{
"_id" : "N1379828096012",
"itemPid" : "N0",
"inspectContent" : "精品国画",
"itemDisplayOrder" : 0,
"itemLevel" : 1
}, {
"_id" : "N1379828110463",
"itemPid" : "N1379828096012",
"inspectContent" : "花鸟画-牡丹",
"itemDisplayOrder" : 4,
"itemLevel" : 2
}, {
"_id" : "N1379828116660",
"itemPid" : "N1379828096012",
"inspectContent" : "人物画-道渡",
"itemDisplayOrder" : 5,
"itemLevel" : 2
}, {
"_id" : "N1379828134619",
"itemPid" : "N0",
"inspectContent" : "美式油画",
"itemDisplayOrder" : 1,
"itemLevel" : 1
}, {
"_id" : "N1379828142238",
"itemPid" : "N1379828134619",
"inspectContent" : "山水画-高山流水",
"itemDisplayOrder" : 0,
"itemLevel" : 2
}, {
...
...
}

　　要展示的效果图如下：

　　问题分析：在整个表格中，表头的展示是最简单的，直接写静态的HTML代码<th>就可以完成，比较复杂的是评论这一项，因为这个地方已经出现了迭代。最复杂的地方是画风和画作，因为这是一个两级联动目录，必须根据画作的内容数量来判断画风所占的单元格跨几行（rowspan）。

　　解决画风跨几行的问题的方式有两种：一种是先绘画出画作的单元格<td>，根据画作的数量计算画风所占的行数，再绘制画风的单元格<td>。另外一种方式是先绘制画风的单元格<td>，根据画风下面画作列表，绘制画作单元格<td>。

按照从左到右，从前往后的顺序来说，大多数人比较习惯使用第二种方式绘制单元格，而事实也证明第二种绘制方式要比第一种方式更容易理解。而实际上，两种绘制方法的效率是差不多的。具体的实现代码如下：

<table border="1" cellpadding="1" cellspacing="1" style="width:100%;">
<caption>京华艺社书画</caption>
<c:if test="${firstArtsList!=null && secondArtsList!=null}">
<tr>
<th rowspan="2">画风</th>
<th rowspan="2">画作</th>
<th colspan="3">评论</th>
</tr>
<tr>
<th>怒赞<input type="checkBox" id="chkSelectAll" name="allSelected" value="1" checked              <th>超赞</th>
<th>说明</th>
</tr>
<c:forEach items="${firstArtsList}" var="item1" varStatus="status1">
<c:set var="row_count" value="0"></c:set>
<c:set var="child_count_1" value="0"></c:set>
<c:set var="child_count_2" value="0"></c:set>
<c:if test="${secondArtsList!=null}">
<c:forEach items="${secondArtsList}" var="item2" varStatus="status3">
<c:if test="${item1.itemId == item2.itemPid}">
<c:set var="row_count" value="${row_count+1}"></c:set>
</c:if>
</c:forEach>
<tr>
<td rowspan="${row_count}">${item1.artsContent}</td>
<c:forEach items="${secondArtsList}" var="item2" varStatus="status2">
<c:if test="${item1.itemId==item2.itemPid}">
<c:set var="child_count_1" value="${child_count_1+1}"></c:set>
<c:if test="${child_count_1==1}">
<td>${item2.artsContent}</td>

<c:if test="${actionName=='updateArtsResult'}">       <!-- 编辑条件下 -->
<c:forEach items="${ArtsList}" var="ArtsItem" varStatus="ArtsStatus">
<c:if test="${ArtsItem.itemId == item2.itemId}">
<td>
<input type="radio" name="ArtsList[${status2.index+1}].result" value="1" <c:if test="${ArtsItem.result == '1'}">checked</c:if> />
</td>
<td>
<input type="radio" name="ArtsList[${status2.index+1}].result" value="0" <c:if test="${ArtsIte
4000
m.result == '0'}">checked</c:if>                                             </td>
<td>
<input type="text" name="ArtsList[${status2.index+1}].remark" value="${ArtsItem.remark}" />
<input type="hidden" name="ArtsList[${status2.index+1}].itemId" value="${item2.itemId}">
<input type="hidden" name="ArtsList[${status2.index+1}].itemName" value="${item2.artsContent}">
<input type="hidden" name="ArtsList[${status2.index+1}].resultId" value="${ArtsItem.resultId}">
</td>
</c:if>
</c:forEach>
</c:if>
<c:if test="${actionName == 'addArtsResult'}">        <!-- 添加条件下 -->
<td><input type="radio" name="ArtsList[${status2.index+1}].result" value="1" checked></td>
<td><input type="radio" name="ArtsList[${status2.index+1}].result" value="0"></td>
<td>
<input type="text" name="ArtsList[${status2.index+1}].remark" value="" />
<input type="hidden" name="ArtsList[${status2.index+1}].itemName" value="${item2.artsContent}">
<input type="hidden" name="ArtsList[${status2.index+1}].itemId" value="${item2.itemId}">
</td>
</c:if>
</c:if>
</c:if>
</c:forEach>
</tr>
<c:forEach items="${secondArtsList}" var="item2" varStatus="status2">
<c:if test="${item1.itemId==item2.itemPid}">
<c:set var="child_count_2" value="${child_count_2+1}"></c:set>
<c:if test="${child_count_2!=1}">
<tr>
<td>${item2.artsContent}</td>
<c:if test="${actionName == 'updateArtsResult'}">     <!-- 编辑条件下 -->
<c:forEach items="${ArtsList}" var="ArtsItem" varStatus="ArtsStatus">
<c:if test="${ArtsItem.itemId == item2.itemId}">
<td>
<input type="radio" name="ArtsList[${status2.index+1}].result" value="1" <c:if test="${ArtsItem.result == '1'}">checked</c:if> />
</td>
<td>
<input type="radio" name="ArtsList[${status2.index+1}].result" value="0" <c:if test="${ArtsItem.result == '0'}">checked</c:if>                                             </td>
<td>
<input type="text" name="ArtsList[${status2.index+1}].remark" value="${ArtsItem.remark}" />
<input type="hidden" name="ArtsList[${status2.index+1}].itemName" value="${item2.artsContent}">
<input type="hidden" name="ArtsList[${status2.index+1}].itemId" value="${item2.itemId}">
<input type="hidden" name="ArtsList[${status2.index+1}].resultId" value="${ArtsItem.resultId}">
</td>
</c:if>
</c:forEach>
</c:if>
<c:if test="${actionName == 'addArtsResult'}">        <!-- 添加条件下 -->
<td><input type="radio" name="ArtsList[${status2.index+1}].result" value="1" checked></td>
<td><input type="radio" name="ArtsList[${status2.index+1}].result" value="0"                                     <td>
<input type="text" name="ArtsList[${status2.index+1}].remark" value="" />
<input type="hidden" name="ArtsList[${status2.index+1}].itemName" value="${item2.artsContent}">
<input type="hidden" name="ArtsList[${status2.index+1}].itemId" value="${item2.itemId}">
</td>
</c:if>
</tr>
</c:if>
</c:if>
</c:forEach>
</c:if>
</c:forEach>
</c:if>
</table>

<table border="1" cellpadding="1" cellspacing="1" style="width: 100%;">
<caption style="font-size: 22px; font-weight: bold;">京华艺社书画</caption>
<tr>
<th rowspan="2">画风</th>
<th rowspan="2">画作</th>
<th colspan="3">评论</th>
</tr>
<tr>
<th>怒赞<input type="checkBox" id="chkSelectAll" name="allSelected"
value="1" checked         </th>
<th>超赞</th>
<th>说明</th>
</tr>
<tr>
<td rowspan="5">精品国画</td>
<td>花鸟画-牡丹</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[1].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[1].result" value="0">
</td>
<td><input type="text" name="artsList[1].remark" value="" />
<input type="hidden" name="artsList[1].itemName" value="花鸟画-牡丹">
<input type="hidden" name="artsList[1].itemId"
value="N1382669078836"></td>
</tr>
<tr>
<td>花鸟画-月季</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[2].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[2].result" value="0"
</td>
<td><input type="text" name="artsList[2].remark" value="" />
<input type="hidden" name="artsList[2].itemName" value="花鸟画-月季">
<input type="hidden" name="artsList[2].itemId"
value="N1382669097696"></td>
</tr>
<tr>
<td>人物画-道渡</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[3].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[3].result" value="0"
</td>
<td><input type="text" name="artsList[3].remark" value="" />
<input type="hidden" name="artsList[3].itemName" value="人物画-道渡">
<input type="hidden" name="artsList[3].itemId"
value="N1382669122278"></td>
</tr>
<tr>
<td>动物画-奔腾骏马</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[4].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[4].result" value="0"
</td>
<td><input type="text" name="artsList[4].remark" value="" />
<input type="hidden" name="artsList[4].itemName" value="动物画-奔腾骏马">
<input type="hidden" name="artsList[4].itemId"
value="N1382669146883"></td>
</tr>
<tr>
<td>山水画-依山傍水</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[5].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[5].result" value="0"
</td>
<td><input type="text" name="artsList[5].remark" value="" />
<input type="hidden" name="artsList[5].itemName" value="山水画-依山傍水">
<input type="hidden" name="artsList[5].itemId"
value="N1382669166099"></td>
</tr>
<tr>
<td rowspan="5">美式油画</td>
<td>山水画-大浪滔天</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[6].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[6].result" value="0">
</td>
<td><input type="text" name="artsList[6].remark" value="" />
<input type="hidden" name="artsList[6].itemName" value="山水画-大浪滔天">
<input type="hidden" name="artsList[6].itemId"
value="N1382669196092"></td>
</tr>
<tr>
<td>山水画-高山流水</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[7].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[7].result" value="0"
</td>
<td><input type="text" name="artsList[7].remark" value="" />
<input type="hidden" name="artsList[7].itemName" value="山水画-高山流水">
<input type="hidden" name="artsList[7].itemId"
value="N1382669207937"></td>
</tr>
<tr>
<td>人物画-杂技</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[8].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[8].result" value="0"
</td>
<td><input type="text" name="artsList[8].remark" value="" />
<input type="hidden" name="artsList[8].itemName" value="人物画-杂技">
<input type="hidden" name="artsList[8].itemId"
value="N1382669216660"></td>
</tr>
<tr>
<td>人物画-人体艺术</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[9].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[9].result" value="0"
</td>
<td><input type="text" name="artsList[9].remark" value="" />
<input type="hidden" name="artsList[9].itemName" value="人物画-人体艺术">
<input type="hidden" name="artsList[9].itemId"
value="N1382669224424"></td>
</tr>
<tr>
<td>生活画-过年</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[10].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[10].result" value="0"
</td>
<td><input type="text" name="artsList[10].remark" value="" />
<input type="hidden" name="artsList[10].itemName" value="生活画-过年">
<input type="hidden" name="artsList[10].itemId"
value="N1382669238949"></td>
</tr>
<tr>
<td rowspan="4">名家书法</td>
<td>龙马精神</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[11].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[11].result" value="0">
</td>
<td><input type="text" name="artsList[11].remark" value="" />
<input type="hidden" name="artsList[11].itemName" value="龙马精神">
<input type="hidden" name="artsList[11].itemId"
value="N1382669259587"></td>
</tr>
<tr>
<td>珠联璧合</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[12].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[12].result" value="0"
</td>
<td><input type="text" name="artsList[12].remark" value="" />
<input type="hidden" name="artsList[12].itemName" value="珠联璧合">
<input type="hidden" name="artsList[12].itemId"
value="N1382669267222"></td>
</tr>
<tr>
<td>天道酬勤</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[13].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[13].result" value="0"
</td>
<td><input type="text" name="artsList[13].remark" value="" />
<input type="hidden" name="artsList[13].itemName" value="天道酬勤">
<input type="hidden" name="artsList[13].itemId"
value="N1382669290698"></td>
</tr>
<tr>
<td>精气神</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[14].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[14].result" value="0"
</td>
<td><input type="text" name="artsList[14].remark" value="" />
<input type="hidden" name="artsList[14].itemName" value="精气神">
<input type="hidden" name="artsList[14].itemId"
value="N1382669316236"></td>
</tr>
<tr>
<td rowspan="6">仿古名画</td>
<td>清余挚花鸟册之兰花蝴蝶</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[15].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[15].result" value="0">
</td>
<td><input type="text" name="artsList[15].remark" value="" />
<input type="hidden" name="artsList[15].itemName"
value="清余挚花鸟册之兰花蝴蝶"> <input type="hidden"
name="artsList[15].itemId" value="N1382669363806"></td>
</tr>
<tr>
<td>清余挚花鸟册之富贵牡丹</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[16].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[16].result" value="0"
</td>
<td><input type="text" name="artsList[16]
23ff7
.remark" value="" />
<input type="hidden" name="artsList[16].itemName"
value="清余挚花鸟册之富贵牡丹"> <input type="hidden"
name="artsList[16].itemId" value="N1382669384370"></td>
</tr>
<tr>
<td>清余挚花鸟册之金秋赏菊</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[17].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[17].result" value="0"
</td>
<td><input type="text" name="artsList[17].remark" value="" />
<input type="hidden" name="artsList[17].itemName"
value="清余挚花鸟册之金秋赏菊"> <input type="hidden"
name="artsList[17].itemId" value="N1382669404003"></td>
</tr>
<tr>
<td>清余挚花鸟册之花开吉祥</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[18].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[18].result" value="0"
</td>
<td><input type="text" name="artsList[18].remark" value="" />
<input type="hidden" name="artsList[18].itemName"
value="清余挚花鸟册之花开吉祥"> <input type="hidden"
name="artsList[18].itemId" value="N1382669422672"></td>
</tr>
<tr>
<td>故宫-山雨欲来图</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[19].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[19].result" value="0"
</td>
<td><input type="text" name="artsList[19].remark" value="" />
<input type="hidden" name="artsList[19].itemName" value="故宫-山雨欲来图">
<input type="hidden" name="artsList[19].itemId"
value="N1382669437943"></td>
</tr>
<tr>
<td>故宫-阿旁宫图</td>
<!-- 添加条件下 -->
<td><input type="radio" name="artsList[20].result" value="1"
checked>
</td>
<td><input type="radio" name="artsList[20].result" value="0"
</td>
<td><input type="text" name="artsList[20].remark" value="" />
<input type="hidden" name="artsList[20].itemName" value="故宫-阿旁宫图">
<input type="hidden" name="artsList[20].itemId"
value="N1382669455768"></td>
</tr>
</table>