通过thymeleaf实现后台集合数据，前端循环显示，并实现点击复制功能

最新推荐文章于 2023-04-04 14:17:20 发布

菜鸟装大神

最新推荐文章于 2023-04-04 14:17:20 发布

阅读量918

点赞数 4

文章标签：前端 java javascript

本文链接：https://blog.csdn.net/bluesease/article/details/127362724

版权

本文展示了如何在后台使用List<String>传递参数到前端，并在前端利用Thymeleaf进行循环展示，同时通过JavaScript实现点击表格单元格内容自动复制的功能。这一过程涵盖了后端数据传输、前端模板渲染及JS交互的基本操作。

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

话不多说上干货

后台集合传输

List<String> paramList = new ArrayList<String>();
model.addAttribute("paramList",paramList);
return "页面路径";

前端实现后台代码循环

<table class="layui-table timo-detail-table">
            <col width="150px"><col>
            <tbody>
                <tr th:each="param: ${paramList}">
                    <td th:title="${param}" th:text="${param}" th:onclick="copytext([[${param}]])"></td>
            </tbody>
        </table>

js实现点击复制

<script type="text/javascript">
        function copytext(text) {
            var oInput = document.createElement('input');
            oInput.value = text;
            document.body.appendChild(oInput);
            oInput.onfocus = function(e){
                e.preventDefault()
            }
            oInput.select(); // 选择对象
            document.execCommand('Copy')
            oInput.blur();
            document.body.removeChild(oInput);
            layer.msg("复制成功", {offset: '15px', time: 1000, icon: 1});
        }
    </script>

就搞定了，快来动手试试吧。