溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了js與jQuery實現獲取table中的數據并拼成json字符串操作。分享給大家供大家參考，具體如下：
核心代碼如下：
JavaScript代碼：
function tabToJSON(id) {
var trs = document.getElementById(id).getElementsByTagName("tr");//獲得tr數組
var titles = trs[0].getElementsByTagName("td"); //獲得表頭td數組
var json = "";
for(var i = 1; i < trs.length; i++) {
var tds = trs[i].getElementsByTagName("td");
json += "{";
//拼裝json
for(var j = 0; j < tds.length; j++)
json += titles[j].innerHTML + ":" + tds[j].innerHTML + ",";
json = json.substring(0, json.length - 1) + "},";
}
json = "[" + json.substring(0, json.length - 1) + "]";
document.getElementById("test").innerHTML = json;
}
jQuery代碼：
function tabToJSONForJquery(id) {
var titles = $("#" + id).find("tr:first td"); //獲得表頭td數組
//遍歷非表頭的，tr、td...拼裝json
var json = "[" + $("#" + id).find("tr:not(:first)").map(function(i, e) {
return "{" + $(e).children("td").map(function(j, el) {
return $(titles[j]).html() + ":" + $(el).html();
}).get().join(",") + "}";
}).get().join(",") + "]";
$("#test").html(json);
}
注：為便于測試，建議jQuery直接使用cdn如：
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
測試HTML部分（table表格與json數據顯示部分）：
<table id="tbl" border="1"> <tr><td>編號</td><td>年齡</td><td>單元</td><td>房間號</td></tr> <tr><td>1</td><td>25</td><td>1</td><td>1-2</td></tr> <tr><td>2</td><td>22</td><td>1</td><td>1-1</td></tr> <tr><td>3</td><td>21</td><td>3</td><td>3-3</td></tr> <tr><td>4</td><td>20</td><td>2</td><td>2-2</td></tr> <tr><td>5</td><td>35</td><td>4</td><td>4-2</td></tr> </table> <div id="test"></div>
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試得到json數據為：
[{編號:1,年齡:25,單元:1,房間號:1-2},{編號:2,年齡:22,單元:1,房間號:1-1},{編號:3,年齡:21,單元:3,房間號:3-3},{編號:4,年齡:20,單元:2,房間號:2-2},{編號:5,年齡:35,單元:4,房間號:4-2}]
感興趣的朋友親自動手測試一下看看效果如何
PS：這里再為大家推薦幾款相關的json在線工具供大家參考：
在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.jb51.net/code/json
JSON在線格式化工具：
http://tools.jb51.net/code/jsonformat
在線XML/JSON互相轉換工具：
http://tools.jb51.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉換工具：
http://tools.jb51.net/code/jsoncodeformat
在線json壓縮/轉義工具：
http://tools.jb51.net/code/json_yasuo_trans
更多關于JavaScript相關內容可查看本站專題：《JavaScript中json操作技巧總結》、《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
