将json数据集合表格显示及表格中增加按钮

最新推荐文章于 2025-05-17 10:15:00 发布

原创最新推荐文章于 2025-05-17 10:15:00 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#数据 #json #遍历 #前端

json 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何将从后台获取的JSON数据集合以表格形式展示在前端，并通过EL表达式简化遍历过程，避免了在JavaScript中插入HTML的复杂性。文中还展示了如何在表格中添加删除、更新和新增按钮，利用POST方法传递数据，以及处理JSON数组输入的技巧。

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

将json数据集合表格显示

本文讲述的是将后台获取到的json数据集合用表格的方式呈现到前端

第一次的时候，根据网上的教程，使用了js方法，对json集合进行遍历后输出，发现其较为复杂，且输出的时候因为要在js里加入html语句，导致了一些问题。（由于表格语句是在js遍历的时候用“innerHTML”输出的，后来需要在表格中添加一些如按钮等其他元素，而使用“innerHTML”语句本身就包含了引号，而html语句也需要引号，从而导致了许多不必要的麻烦）为了减少这些麻烦，后再便采用了EL表达式的 foreach循环输出，EL表达式可以直接在html语句中使用，既方便又快捷。下面上代码

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: hasee
  Date: 2017/8/16
  Time: 14:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

<table>
    <tr>
        <th>id</th>
        <th>sql_name</th>
        <th>sql_detail</th>
        <th>description</th>
        <th>删除</th>
        <th>修改</th>
    </tr>
    <c:forEach items="${data}" var="one" varStatus="num" >
        <tr>
            <td>${one.id}</td>
            <td>${one.sqlName}</td>
            <td>${one.sqlDetail}</td>
            <td>${one.description}</td>
            <%--<td><button type="button" class="del" onclick="del(${one.id})" href="/form/formsql/delete/data=">删除</button> </td>--%>
            <td>
                <form class="del" action="/lab/form/formsql/delete" method="post">
                    <input type="hidden" name="id" value="${one.id}">
                    <input type="submit" value="删除">
                </form>
            </td>
            <td>
                <form class="updated" action="/lab/form/formsql/updated" method="post">
                    <input type="hidden" name="id" value="${one.id}">
                    <input type="text" name="up">
                    <input type="submit" value="更新">
                </form>
            </td>
        </tr>
    </c:forEach>
</table>
<form id="insert" action="/lab/form/formsql/insert" method="post">
    name:<input type="text" name="sqlname">
    sql_name:<input type="text" name="detail">
    description:<input type="text" name="desc">
    <input type="submit" value="新增">
</form>

</body>


</html>

可以明显看出，使用foreach后的代码十分简洁，且实用

<c:forEach items="${data}" var="one" varStatus="num" >
        <tr>
            <td>${one.id}</td>
            <td>${one.sqlName}</td>
            <td>${one.sqlDetail}</td>
            <td>${one.description}</td>
</c:forEach>

将后台拿到的数据“data”类似与java中foreach一样使用，不过改变了形式而已。

<td>
                <form class="del" action="/lab/form/formsql/delete" method="post">
                    <input type="hidden" name="id" value="${one.id}">
                    <input type="submit" value="删除">
                </form>
            </td>