jQuery+json實現(xiàn)動態(tài)創(chuàng)建復雜表格table的方法
本文實例講述了jQuery+json實現(xiàn)動態(tài)創(chuàng)建復雜表格table的方法。分享給大家供大家參考,具體如下:
function SetSubTable() {
var obj = jQuery.parseJSON($("#SubJsonStrValue").val());
window.ALLPARAMTERS = obj;
var row_str = "";
var span_num = 1
for (var i = 0; i < obj.length; i++) {
if (obj[i].ParamNames.length > 0) {
row_str += '<tr><td rowspan="' + obj[i].ParamNames.length + '"><input type="checkbox" name="_'+obj[i].Id+'" />' + obj[i].Name + '</td>';
for (var j = 0; j < obj[i].ParamNames.length; j++) {
if (j != 0) {
row_str += "<tr>";
}
row_str += '<td><input type="checkbox" name="p_'+obj[i].ParamNames[j].Id+'_'+obj[i].Id+'" />' + obj[i].ParamNames[j].Name + '</td><td>';
for (var k = 0; k < obj[i].ParamNames[j].ListItems.length; k++) {
row_str += obj[i].ParamNames[j].ListItems[k].Name+"|";
}
row_str = row_str.substring(0, row_str.length - 2);
row_str += "</td><td>";
if (obj[i].ParamNames[j].CanMultiSelecte) {
row_str += "多選";
} else {
row_str += "單選";
}
row_str += "</td></tr>";
}
}
}
$("#sub_table_header").after(row_str);
}
PS:關(guān)于json操作,這里再為大家推薦幾款比較實用的json在線工具供大家參考使用:
在線JSON代碼檢驗、檢驗、美化、格式化工具:
http://tools.jb51.net/code/json
JSON在線格式化工具:
http://tools.jb51.net/code/jsonformat
在線XML/JSON互相轉(zhuǎn)換工具:
http://tools.jb51.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具:
http://tools.jb51.net/code/jsoncodeformat
在線json壓縮/轉(zhuǎn)義工具:
http://tools.jb51.net/code/json_yasuo_trans
C語言風格/HTML/CSS/json代碼格式化美化工具:
http://tools.jb51.net/code/ccode_html_css_json
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery表單操作總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- JS如何操作DOM基于表格動態(tài)展示數(shù)據(jù)
- javascript操作向表格中動態(tài)加載數(shù)據(jù)
- JavaScript實現(xiàn)動態(tài)生成表格
- JS表格的動態(tài)操作完整示例
- 利用JS動態(tài)生成隔行換色HTML表格的兩種方法
- JS實現(xiàn)動態(tài)生成html table表格的方法分析
- js動態(tài)添加表格逐行添加、刪除、遍歷取值的實例代碼
- Vue.js實現(xiàn)表格動態(tài)增加刪除的方法(附源碼下載)
- JS實現(xiàn)動態(tài)表格的添加,修改,刪除功能(推薦)
- JS實現(xiàn)table表格數(shù)據(jù)排序功能(可支持動態(tài)數(shù)據(jù)+分頁效果)
- JS實現(xiàn)動態(tài)生成表格并提交表格數(shù)據(jù)向后端
- JavaScript動態(tài)生成表格的示例
相關(guān)文章
JQuery Tips(2) 關(guān)于$()包裝集你不知道的
包裝集總是面向集合的,需要的朋友可以參考下。2009-12-12
詳解jquery插件jquery.viewport.js學習使用方法
本篇文章主要介紹了詳解jquery插件jquery.viewport.js學習使用方法,具有一定的參考價值,有興趣的可以了解一下2017-09-09
jQuery實現(xiàn)左側(cè)導航模塊的顯示與隱藏效果
這篇文章主要介紹了jQuery實現(xiàn)左側(cè)導航模塊的顯示與隱藏效果,涉及jQuery相應(yīng)鼠標事件動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-07-07

