获取表格数据转换为JSON字符串
程序员文章站
2023-02-06 12:55:02
核心代码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"}]