小吕同学真的不会敲代码 2023-02-15 18:44 采纳率: 57.1%
浏览 70
已结题

java后端list集合中的数据怎么传递到前端div中显示?前端html不是js,动态增加div(非表格)

img

如图所示,我想查看某个对象在数据库中的所有数据展示在前端,动态加载div(多少条数据加载几个div),目前查到的方法也只是前端采用

<c:forEach items="${list}" > 

结合javascript,可是c:forEach适用于.js我的项目都是.html,还有适用于表格的

<tr th:each="image:${list}">

表格的样式不符合项目需求,请问spring作为后端,html作为前端,且适用于动态增加div显示数据,有什么方法能做到?

  • 写回答

5条回答 默认 最新

  • 社区专家-Monster-XH 2023-02-15 18:55
    关注

    可以使用JavaScript来动态创建和添加HTML元素,并将从后端获取的数据填充到这些元素中。
    在你的HTML页面中,可以创建一个空的容器元素,例如:

    <div id="data-container"></div>
    
    
    

    然后,使用JavaScript获取从后端传递过来的数据,并使用循环将每个数据项添加到容器中:

    
    <script>
      // 假设从后端获取的数据存在名为 data 的变量中
      var data = ${list};
    
      // 获取容器元素
      var container = document.getElementById("data-container");
    
      // 循环遍历数据,并为每个数据项创建一个 div 元素
      for (var i = 0; i < data.length; i++) {
        var div = document.createElement("div");
    
        // 向 div 元素中添加数据
        var img = document.createElement("img");
        img.src = data[i].imageUrl; // 假设数据项中包含一个名为 imageUrl 的属性,用于显示图片
        div.appendChild(img);
    
        // 添加其他数据到 div 元素中
        // ...
    
        // 将 div 元素添加到容器中
        container.appendChild(div);
      }
    </script>
    
    

    这将创建一个或多个包含数据的 div 元素,并将它们添加到容器中以供显示。你可以根据需要使用CSS样式来设置这些元素的布局和外观。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 2月23日
  • 已采纳回答 2月15日
  • 修改了问题 2月15日
  • 赞助了问题酬金15元 2月15日
  • 展开全部

悬赏问题

  • ¥15 不管从键盘上输入多少字符或者数组 输出的结果两个字符间间隔一个空格符
  • ¥30 频率分析法分析绘制奈奎斯特图、波特图
  • ¥15 弹出来一万个系统找不到指定的文件框框,怎么解决
  • ¥15 ADS生成的微带线为什么是蓝色空心的
  • ¥15 求一下解题思路,完全不懂
  • ¥15 tensorflow
  • ¥15 densenet网络结构中,特征以cat方式复用后是怎么进行误差回传的
  • ¥15 STM32G471芯片spi设置了8位,总是发送16位
  • ¥15 R语言并行计算beta-NTI中tree文件的类型
  • ¥15 如何解读marsbar导出的ROI数据?