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


Posted in jQuery onJuly 04, 2017

本文实例讲述了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 相关文章推荐
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 #jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery简介_动力节点Java学院整理
Jul 04 #jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery实现点击关注和取消功能
Jul 03 #jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 #jQuery
You might like
PHP可逆加密/解密函数分享
2012/09/25 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
php格式化日期实例分析
2014/11/12 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
可输入的下拉框
2006/06/19 Javascript
ECMAScript 基础知识
2007/06/29 Javascript
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
linux安装python修改默认python版本方法
2019/03/31 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
大学自我鉴定
2013/12/20 职场文书
《都江堰》教学反思
2014/02/07 职场文书
英文自荐信常用句子
2014/03/26 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
神农溪导游词
2015/02/11 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL