jQuery实现动态给table赋值的方法示例
本文实例讲述了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>
效果:
(资源库 www.zyku.net)
栏 目:JavaScript
本文地址:https://www.zyku.net/js/1456.html
您可能感兴趣的文章
- 07-30jquery v3.5.1(最新)
- 07-30jquery v3.4.1
- 07-30jquery v3.3.1
- 07-30jquery v3.2.1
- 07-30jquery v3.1.1
- 07-30jquery v3.0.0
- 07-30jquery v2.1.4
- 07-29jquery v2.1.1
- 07-29jquery v2.0.0
- 07-29jquery v1.11.3
- 12-09iqoo8pro怎么设置简体中文
- 10-15华为nova9pro怎么还原出厂模式
- 09-17腾讯QQ直接由外链进入淘宝步骤一览
- 12-29流年壁纸头像大全-流年壁纸头像大全应
- 10-09LOFTER隐藏个人回复教程介绍
- 02-19Linux vi 查找功能详解
- 11-23Linux下查看(查找)大文件的方法
- 02-20腾讯云安装iis的图文教程
- 02-18在Ubuntu系统中安装MariaDB数据库的教
- 01-24帝国CMS自定义列表获取当前列表ID的方

最近更新
阅读排行
猜你喜欢
- 08-14airPodspro怎么匹配华为手机
- 12-03airpods pro空间音频在哪里
- 12-23HTML <col> 标签
- 08-15iqoo8如何设置屏幕压感
- 11-02小米手环怎样启用智能解锁
- 10-19小米手机怎样开启红包声音提醒
- 09-18vivox70pro应用隐藏功能在哪
- 09-27华为手环6新增免费试用表盘功能介绍
- 11-16钉钉撤销请假申请方法一览
- 08-14B站直播回放在哪设置