核心代碼JavaScript代碼: function sc () { var myTable=document.getElementById("myTable"); //獲取表格中的所有行 var rows=myTable.rows; //獲取第一行的所有列 var title=rows[0].ce ...
核心代碼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); }
HTML代碼
<table id="myTable" class="cart_table"> <tr class="cart_title"> <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="獲取表格數據生成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"}]