如何在HTML表中迭代收藏夹,使用百叶窗在行中有限(n)列。

发布于 2025-02-04 03:38:57 字数 523 浏览 4 评论 0原文

我是前端的新手,并使用百里叶。我正在寻找一种构建动态形式的方法。我正在从控制器到前端(HTML)发送地图,我能够使用以下代码和胸腺属性属性显示我的地图值,

<tr class="row" th:each="element : ${elementMap}">
    <td th:text="${element.key}"></td>
    <td>
        <input type="text" id=${element.keyth:name=${element.key} th:value="${element.value}" /><br>
    </td>
</tr>

我需要在一排中显示4列。或者,如果将上述地图转换为arrayList,则可以连续允许4列。但是,当我使用th:每个时&amp;&amp; TH:文本用于迭代ArrayList的内容如何连续提及4列(任何CSS样式都可以使用)?还有其他方法可以解决此问题吗?

I am new to front end and using thymeleaf. I am looking for an approach to build a dynamic form. I am sending a map from controller to front end (html), I am able to display the values of my map using below code with thymeleaf attributes

<tr class="row" th:each="element : ${elementMap}">
    <td th:text="${element.key}"></td>
    <td>
        <input type="text" id=${element.keyth:name=${element.key} th:value="${element.value}" /><br>
    </td>
</tr>

I need to display 4 columns in a row. Or If converting above Map to ArrayList is it possible to allow 4 columns in a row. But when I use th:each && th:text for iterating content of Arraylist how to mention 4 columns in a row (Any css style would be available)? Is there any other approach available to fix this ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

仅一夜美梦 2025-02-11 03:38:57

在您的页面上,您正在为每条元素迭代一行,

列是td标签,根据您告知的代码,这是每行两列(键和值)。

但是,如果要限制列的数量,则可以使用CSS,但是通过代码的结构,您具有动态行(列表的每个元素为1行),并且每行只有两个列。

如果问题太多了,您只能放置最多4 td标签

on your page you are iterating one line for each element

the columns are the td tags, which according to the code you informed are two columns per line (key and value).

but if you want to limit the number of columns, you can use css, but by the structure of your code, you have dynamic lines (1 line for each element of the list) and you only have two columns per line.

if the problem is too many columns, you can only put up to 4 td tags

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文