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

最新推荐文章于 2022-02-28 08:44:41 发布

WillemGavin

最新推荐文章于 2022-02-28 08:44:41 发布

阅读量2.7k

点赞数

分类专栏： json 文章标签：数据 json 遍历前端

本文链接：https://blog.csdn.net/WillemGary/article/details/77853047

版权

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

摘要由CSDN通过智能技术生成

将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</