獲取表格數據轉換為JSON字符串

 

核心代碼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" 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"}]