jQuery實(shí)現(xiàn)動(dòng)態(tài)給table賦值的方法示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)動(dòng)態(tài)給table賦值的方法。分享給大家供大家參考,具體如下:
html
請(qǐng)忽視各種class,因?yàn)榍岸擞玫氖莑ayui
<table class="layui-table" lay-skin="line" id="datas"> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr> <th>昵稱</th> <th>加入時(shí)間</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": "這是測(cè)試的數(shù)數(shù)據(jù)這是測(cè)試的數(shù)數(shù)據(jù)" }, { "id": 3, "url": "http://www.taobao.com", "switch": 0, "order": 3, "pid": 2, "title": "淘寶購(gòu)物" }, { "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": "這是測(cè)試的數(shù)數(shù)據(jù)2" }, { "id": 6, "url": "http://www.taobao.com1", "switch": 1, "order": 6, "pid": 0, "title": "淘寶購(gòu)物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擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery獲取table下某一行某一列的值實(shí)現(xiàn)代碼
- jQuery中table數(shù)據(jù)的值拷貝和拆分
- jQuery獲取Table某列的值(推薦)
- 用jQuery獲取table中行id和td值的實(shí)現(xiàn)代碼
- jquery遍歷table的tr獲取td的值實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)獲取table表格第一列值的方法
- jQuery學(xué)習(xí)筆記(4)--Jquery中獲取table中某列值的具體思路
- 模仿JQuery sortable效果 代碼有錯(cuò)但值得看看
- JQuery動(dòng)態(tài)給table添加、刪除行 改進(jìn)版
- JQuery Ajax動(dòng)態(tài)生成Table表格
- 使用jquery給指定的table動(dòng)態(tài)添加一行、刪除一行
- 基于JQuery的動(dòng)態(tài)刪除Table表格的行和列的代碼
相關(guān)文章
從零開始學(xué)習(xí)jQuery (三) 管理jQuery包裝集
在使用jQuery選擇器獲取到j(luò)Query包裝集后, 我們需要對(duì)其進(jìn)行操作. 本章首先講解如何動(dòng)態(tài)的創(chuàng)建元素, 接著學(xué)習(xí)如何管理jQuery包裝集, 比如添加,刪除,切片等.2011-02-02jquery實(shí)現(xiàn)用戶信息修改驗(yàn)證輸入方法匯總
這篇文章主要介紹了jquery實(shí)現(xiàn)用戶信息修改驗(yàn)證輸入方法,實(shí)例匯總了jquery常用的提交、驗(yàn)證、判定、修改等相關(guān)技巧,非常實(shí)用,需要的朋友可以參考下2015-07-07基于jQuery實(shí)現(xiàn)的設(shè)置文本區(qū)域的光標(biāo)位置
之前做一個(gè)代碼提示的功能涉及到在文本框中插入文本的操作,需要獲得當(dāng)前光標(biāo)位置插入文本,本文章向大家介紹jQuery如何設(shè)置文本區(qū)域的光標(biāo)位置,需要的朋友可以參考一下2018-06-06基于jQuery的可以控制左右滾動(dòng)及自動(dòng)滾動(dòng)效果的代碼
迷上jQuery,相對(duì)于原生JavaScript,它是如此的美妙.也因此,促使我更加的努力的研習(xí)原生JavaScript.2010-07-07jquery checkbox實(shí)現(xiàn)單選小例
checkbox是復(fù)選框如何將其變?yōu)閱芜x呢?下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-11-11jquery網(wǎng)頁(yè)日歷顯示控件calendar3.1使用詳解
這篇文章主要為大家詳細(xì)介紹了jquery網(wǎng)頁(yè)日歷顯示控件calendar3.1使用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11jquery實(shí)現(xiàn)ajax加載超時(shí)提示的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)ajax加載超時(shí)提示的方法,涉及jQuery中l(wèi)oad方法的ajax加載超時(shí)設(shè)置與提示信息處理技巧,需要的朋友可以參考下2016-07-07jquery插件EasyUI中form表單提交實(shí)例分享
這篇文章主要介紹了jquery插件EasyUI中form表單提交實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實(shí)現(xiàn)拖放商品放置購(gòu)物車
這篇文章主要幫助大家輕松學(xué)習(xí)EasyUI實(shí)現(xiàn)拖放商品放置購(gòu)物車的功能,購(gòu)物籃中的物品和價(jià)格也將進(jìn)行更新,感興趣的小伙伴們可以參考一下2015-11-11