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 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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/01/17 PHP
php算法实例分享
2015/07/14 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
javascript 写类方式之六
2009/07/05 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
JS回调函数深入理解
2019/10/16 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
Python基于当前时间批量创建文件
2020/05/07 Python
怎么快速自学python
2020/06/22 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
毕业自我鉴定范文
2013/11/06 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
中学生运动会广播稿
2015/08/19 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
Python+pyaudio实现音频控制示例详解
2022/07/23 Python