jQuery实现动态给table赋值的方法示例
author:一佰互联 2019-03-29   click:374

简介:SSL单域名证书低至39元/年买主机 云服务器 就选阿里云! 腾讯云 无门槛优惠券领取本文实例讲述了jQuery实现动态给table赋值的方法。分享给大家供大家参考,具体如下:html请忽视各种class,因为前端用的是layuitable ...

SSL单域名证书低至39元/年买主机 云服务器 就选阿里云! 腾讯云 无门槛优惠券领取

本文实例讲述了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赋值的方法示例

作者:资源库原文:https://www.zyku.net/js/1456.html本文仅代表作者个人观点,不代表巅云官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱2522407257@qq.com。更多相关资讯,请到巅云www.yinxi.net学习互联网营销技术请到巅云建站www.yx10011.com。