jquery 动态给table赋值

红太狼 2022-06-17 10:55 459阅读 0赞

# html #

请忽视各种class，因为前端用的是layui

<table class="layui-table" lay-skin="line" id="datas">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>昵称</th>
            <th>加入时间</th>
            <th>签名</th>
        </tr>
        </thead>
        <tbody>
        <tr id="template">
            <td id="id"></td>
            <td id="url"></td>
            <td id="title"></td>
        </tr>
        </tbody>
    </table>

# js代码 #

<script> var data = [{ "id": 1, "url": "http://www.jqcool.net", "switch": 1, "order": 1, "pid": 0, "title": "Online Program knowledge share and study platform" }, { "id": 2, "url": "http://www.baidu.com", "switch": 0, "order": 2, "pid": 2, "title": "这是测试的数数据这是测试的数数据" }, { "id": 3, "url": "http://www.taobao.com", "switch": 0, "order": 3, "pid": 2, "title": "淘宝购物" }, { "id": 4, "url": "http://www.jqcool.net1", "switch": 1, "order": 4, "pid": 2, "title": "Online Program knowledge share and study platform2" }, { "id": 5, "url": "http://www.baidu.com1", "switch": 0, "order": 5, "pid": 2, "title": "这是测试的数数据2" }, { "id": 6, "url": "http://www.taobao.com1", "switch": 1, "order": 6, "pid": 0, "title": "淘宝购物2" }]; $.each(data, function (i, n) { var row = $("#template").clone(); row.find("#id").text(n.id); row.find("#url").text(n.url); row.find("#title").text(n.title); row.appendTo("#datas");//添加到模板的容器中 }); </script>

效果

![这里写图片描述][SouthEast]

[SouthEast]: /images/20220617/1f786598a0e64079afcd1f469b48e3ae.png

发表评论取消回复

表情：

评论列表（有 0 条评论，459人围观）

还没有评论，来说两句吧...

相关阅读

相关使用jquery动态为option赋值

在实际开发中，存在多个下拉菜单，下一个下拉菜单选项是由上一个上拉菜单的选项决定，意即上一个下拉菜单不同的选项将会导致下一个或多个下拉菜单选项跟着改变。此时，下拉菜单的选项就不能

ゝ一世哀愁。/ 2024年02月18日 15:44/ 0 赞/ 47 阅读

相关 JQuery动态给table添加、删除行

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] <html> <head> <SCRIPT la

冷不防/ 2022年10月02日 00:59/ 0 赞/ 224 阅读

相关 jquery实现动态操作table

使用jquery实现动态创建行、删除行、行内计算、提交表格数据。 <%@ page language="java" import="java.util." pa

心已赠人/ 2022年07月14日 03:43/ 0 赞/ 270 阅读

相关 jquery动态赋值id 动态取id

直接上代码这是datatable中的一段代码取table中的id作为唯一 if(row.copy == '1'){ return '<div><inp

矫情吗；*/ 2022年07月11日 04:25/ 0 赞/ 253 阅读

相关 jquery 动态给table赋值

html 请忽视各种class，因为前端用的是layui <table class="layui-table" lay-skin="line" id="data

红太狼/ 2022年06月17日 10:55/ 0 赞/ 460 阅读

相关 jquery 给文本框赋值

$("btn1").click(function(){ $("test1").text("Hello world!"); });

蔚落/ 2022年05月13日 14:52/ 0 赞/ 301 阅读

相关使用jquery给select2赋值问题

转载于：[https://blog.csdn.net/sayoko06/article/details/81189070][https_blog.csdn.net_sayoko

墨蓝/ 2022年03月25日 14:30/ 0 赞/ 278 阅读

相关 jquery之table：给table动态增加行、清空table

比如设置table的id为tab var trHTML = "<tr><td>...</td></tr>" $("\tab").append(trHTML);//在tabl

缺乏、安全感/ 2021年11月22日 13:18/ 0 赞/ 412 阅读

相关 jquery给title标签赋值

一、问题描述点击后跳到列表页面，可能会有多个列表页面，区别是该页面的title标签的内容不同问题是如何给title标签赋值 alert($(docume

骑猪看日落/ 2021年09月25日 13:32/ 0 赞/ 425 阅读

相关 jquery给div赋值

一、给div赋值 $("id").html()="test"; //或者 $("id").html("test");

野性酷女/ 2021年09月24日 07:18/ 0 赞/ 464 阅读