JSTL动态生成HTML表格

xiaoxiao2021-02-28  82

转自此

最近在做一个小组项目,对于使用js与JSTL生成HTML代码做了小思考,看到了这篇博客,转一波!!

项目中遇到一个动态生成表格的问题,由于表格的行和列都不是固定的,而是从数据库中取得的,因此需要动态的创建表格。

      由于规范中要求使用JSTL标签库,避免JSP页面冗余java代码,而我的数据库暂时又连不上(电脑有点问题),只能是自己给自己提供数据进行测试了。下面我做了一个小例子,测试了一下JSTL的可行性。废话不多说,直接看例子。

Java代码(部分代码)

[java]  view plain  copy <span style="font-family:'Microsoft YaHei';font-size:14px;">ArrayList arrayList1 = new ArrayList();  arrayList1.add("学号");  arrayList1.add("姓名");  arrayList1.add("性别");  arrayList1.add("联系方式");    ArrayList arrayList2 = new ArrayList();  arrayList2.add(new String[]{"0001""李明""男""10000"});  arrayList2.add(new String[]{"0002""王欢""女""10001"});  arrayList2.add(new String[]{"0003""张华""女""10002"});  arrayList2.add(new String[]{"0004""刘芳""女""10003"});  arrayList2.add(new String[]{"0005""赵六""男""10004"});  arrayList2.add(new String[]{"0006""刘影""女""10005"});        request.setAttribute("arrayList1", arrayList1);  request.setAttribute("arrayList2", arrayList2);</span>  

JSP代码

[html]  view plain  copy <span style="font-family:'Microsoft YaHei';font-size:14px;"><%@ page language="java" contentType="text/html; charset=UTF-8"      pageEncoding="UTF-8"%>  <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>  <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>  <%@ taglib prefix="custom" tagdir="/WEB-INF/tags" %>  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>Test Dynamic Table</title>  </head>  <body>  <div align="center">          <p></p>      </div>      <table width="80%" border="1px" cellpadding="0" cellspacing="0">          <thead>              <tr>                  <c:forEach items="${arrayList1}" var="item">                      <th>${item}</th>                    </c:forEach>              </tr>          </thead>          <tbody>              <c:forEach items="${arrayList2}" var="item">                  <tr>                      <c:forEach var="i" begin="0" end="${fn:length(arrayList1)-1}" step="1">                          <td align="center">${item[i]}</td>                      </c:forEach>                  </tr>              </c:forEach>          </tbody>      </table>  </body>  </html></span>  

效果图

       当然,这里知识做了一个简单的小例子,而且,这个例子的标题行是不固定的,添加了数据之后,JSP页面的EL表达式会直接将添加的数据显示出来,以达到动态生成表格的目的。

       如果需求改变一下,标题行和第一列都是不固定的,都需要从数据库中读出具体的数量从而动态生成表格,从这个小例子中,我想对于后边的需求,你应该会受到一些启发的,有兴趣的自己去尝试一下吧。

完、、、、、、、、、、、

转载请注明原文地址: https://www.6miu.com/read-2621294.html

最新回复(0)