jquery 动态给table赋值

红太狼 2022-06-17 10:55 403阅读 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 条评论，403人围观）

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

相关阅读

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

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

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

相关 jquery给h1和span赋值

1. jquery给h1赋值按照html标准，每个页面只允许一个“<h1>”标签。 <h1>项目一</h1> $('h1').html(); //取

小灰灰/ 2022年07月26日 00:06/ 0 赞/ 320 阅读

相关 jquery实现动态操作table

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

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

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

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

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

相关 jquery 动态给table赋值

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

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

相关 jquery 给文本框赋值

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

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

相关使用jquery给select2赋值问题

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

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

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

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

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

相关 jquery给title标签赋值

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

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

相关 jquery给div赋值

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

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