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>
效果
相關文章
- vue:動態給img賦值Vue賦值
- uniapp動態賦值頭部<title>APP賦值
- 【jquery】select下拉框賦值jQuery賦值
- jQuery radio的取值與賦值jQuery賦值
- jquery取值和賦值(包含部分是原生js的取值和賦值)jQuery賦值JS
- echarts動態賦值結合dataZoom滑動資料Echarts賦值OOM
- jQuery動態修改連結的href屬性值jQuery
- Java反射給泛型集合賦值Java反射泛型賦值
- 物件屬性值賦給變數物件變數
- web中,利用反射給物件賦值Web反射物件賦值
- VUE 父元件動態傳值給子元件Vue元件
- jquery-tablejQuery
- 動態監控input的值的變化 賦值value觸發賦值
- 給numpy陣列賦同樣的值陣列
- Javascript 解構賦值,將屬性/值從物件/陣列中取出,賦值給其他變數JavaScript賦值物件陣列變數
- JavaScript動態建立table表格JavaScript
- 列表切片賦值給另一個變數賦值變數
- jquery 封裝 bootstrap tablejQuery封裝boot
- jquery對table的操作jQuery
- matlab中怎麼給符號變數賦值Matlab符號變數賦值
- jquery動態設定selectjQuery
- Vue.js - 陣列和物件的賦值動態變化 & 克隆Vue.js陣列物件賦值
- vue 商品sku新增,笛卡爾演算法,商品新增。動態生成table,table新增值後 再生成的table 不改變table之前輸入的值Vue演算法
- JavaScript動態為table表格新增行JavaScript
- php之普通變數賦值、物件賦值、引用賦值的區別PHP變數賦值物件
- 解決 Vue 動態生成 el-checkbox 點選無法賦值問題Vue賦值
- Class.isAssignableFrom判斷A類是否可賦值給B類賦值
- Verilog連續賦值、過程賦值、過程連續賦值總結賦值
- jQuery列表動態增加和刪除jQuery
- 圖表外掛Highcharts的動態化賦值,實現圖表資料的動態化設定顯示賦值
- SICP:賦值和區域性狀態(Python實現)賦值Python
- 「譯」靜態單賦值小冊 - 1. 介紹賦值
- 數字索引賦值給多個變數簡單表示式索引賦值變數
- matlab如何給未知數及包含未知數的函式賦值Matlab函式賦值
- 鎖賦值給其他變數為什麼會死鎖呢?賦值變數
- 變數的賦值 指標間接賦值變數賦值指標
- 常被新手忽略的值賦值和引用賦值(偏redux向)賦值Redux
- Java中讀取配置檔案中的內容,並將其賦值給靜態變數的方法Java賦值變數
- Bootstrap4動態模態視窗jquery外掛bootjQuery