jQuery實現(xiàn)動態(tài)給table賦值的方法示例
本文實例講述了jQuery實現(xiàn)動態(tài)給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": "這是測試的數(shù)數(shù)據(jù)這是測試的數(shù)數(shù)據(jù)" }, { "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": "這是測試的數(shù)數(shù)據(jù)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>
效果
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery表格(table)操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設計有所幫助。
- jQuery獲取table下某一行某一列的值實現(xiàn)代碼
- jQuery中table數(shù)據(jù)的值拷貝和拆分
- jQuery獲取Table某列的值(推薦)
- 用jQuery獲取table中行id和td值的實現(xiàn)代碼
- jquery遍歷table的tr獲取td的值實現(xiàn)方法
- jQuery實現(xiàn)獲取table表格第一列值的方法
- jQuery學習筆記(4)--Jquery中獲取table中某列值的具體思路
- 模仿JQuery sortable效果 代碼有錯但值得看看
- JQuery動態(tài)給table添加、刪除行 改進版
- JQuery Ajax動態(tài)生成Table表格
- 使用jquery給指定的table動態(tài)添加一行、刪除一行
- 基于JQuery的動態(tài)刪除Table表格的行和列的代碼
相關(guān)文章
基于jQuery實現(xiàn)的設置文本區(qū)域的光標位置
之前做一個代碼提示的功能涉及到在文本框中插入文本的操作,需要獲得當前光標位置插入文本,本文章向大家介紹jQuery如何設置文本區(qū)域的光標位置,需要的朋友可以參考一下2018-06-06jquery網(wǎng)頁日歷顯示控件calendar3.1使用詳解
這篇文章主要為大家詳細介紹了jquery網(wǎng)頁日歷顯示控件calendar3.1使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11輕松學習jQuery插件EasyUI EasyUI實現(xiàn)拖放商品放置購物車
這篇文章主要幫助大家輕松學習EasyUI實現(xiàn)拖放商品放置購物車的功能,購物籃中的物品和價格也將進行更新,感興趣的小伙伴們可以參考一下2015-11-11