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和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jQuery实现简单三级联动效果
Sep 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
php使用PDO方法详解
2014/12/27 PHP
PHP加密解密类实例分析
2015/04/20 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
客服文员岗位职责
2013/11/29 职场文书
党员创先争优承诺书
2014/03/26 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
土建工程师岗位职责
2014/06/10 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技
Python Flask实现进度条
2022/05/11 Python