相思资源网 Design By www.200059.com

本文实例讲述了jQuery实现动态给table赋值的方法。分享给大家供大家参考,具体如下:

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>

效果

jQuery实现动态给table赋值的方法示例

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

标签:
jQuery,动态,table,赋值

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“jQuery实现动态给table赋值的方法示例”

暂无jQuery实现动态给table赋值的方法示例的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。