获取表格数据转换为JSON字符串

2019-12-28 20:51:04 阅读：264 来源： 互联网

标签：rows 表格单价 myTable var 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);
    		}

　　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"}]

标签：rows,表格,单价,myTable,var,JSON,编号,字符串,书名
来源： https://www.cnblogs.com/duyadong/p/12112993.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

获取表格数据转换为JSON字符串