核心代碼JavaScript代碼：
方法一
function sc () {
var myTable=document.getElementById("myTable");
//獲取表格中的所有行
var rows=myTable.rows;
//獲取第一行的所有列
var title=rows[0].cells;
var json="";
for (var i=1;i<rows.length;i++) {
var cells=rows[i].cells;//獲取第i行中的所有列
json+="{";
//拼裝JSON字串
for (var j=0;j<cells.length;j++) {
json+="\""+title[j].innerHTML+"\":\""+cells[j].innerHTML+"\","
}
//運用substring()方法獲取所需要的子串，去掉不需要的逗號
json=json.substring(0,json.length-1)+"},"
}
json="["+json.substring(0,json.length-1)+"]";
alert(json);
}
方法二（第一步獲取表格資料并儲存在js陣列中，第二步把js物件陣列轉化為JSON字串）
function sc () {
var trs = document.getElementsByTagName("tr"); //獲取表格中的所有行
var sum = [];//新建一個陣列
for(var i = 1; i < trs.length; i++) {
var tds=trs[i].cells;//獲取第i行的所有列
var stu={};//新建一個物件
//把屬性和屬性的值添加到物件中
stu.編號=tds[0].innerHTML;
stu.書名=tds[1].innerHTML;
stu.單價=tds[2].innerHTML;
sum.push(stu);//使用push方法把物件添加到陣列中
}
document.write(JSON.stringify(sum));//把js物件陣列轉換成JSON字串并輸出
}
HTML代碼
<table id="myTable" >
<tr >
<td>編號</td>
<td>書名</td>
<td>單價</td>
</tr>
<tr>
<td>1</td>
<td>C程式設計語言</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>并行程式設計</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td>C#設計模式</td>
<td>100</td>
</tr>
</table>
<input type="button" onclick="sc()" value="https://www.cnblogs.com/duyadong/p/獲取表格資料生成JSON" />
CSS樣式
.cart_table {
text-align: center;
border-collapse: collapse;
}
.cart_title {
background-color: #999999;
}
td {
border: 1px solid;
}
得到JSON資料如下
[{"編號":"1","書名":"C程式設計語言","單價":"50"},{"編號":"2","書名":"并行程式設計","單價":"80"},{"編號":"3","書名":"C#設計模式","單價":"100"}]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/159150.html
標籤：JavaScript