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

 

获取表格数据转换为JSON字符串的更多相关文章

  1. php pdo 获取数据转换为json

    php 查询语句获取数据,数据库有好多表现形式,如何拿出自己需要的数据 $raceSQL ='select id, race_name,race_code,content from je_race ' ...

  2. struts2:JSON在struts中的应用(JSP页面中将对象转换为JSON字符串提交、JSP页面中获取后台Response返回的JSON对象)

    JSON主要创建如下两种数据对象: 由JSON格式字符串创建,转换成JavaScript的Object对象: 由JSON格式字符串创建,转换成JavaScript的List或数组链表对象. 更多关于J ...

  3. [TimLinux] JavaScript AJAX接收到的数据转换为JSON格式

    1. 接收数据 AJAX接收数据是通过xhr.responseText属性,这是一个属性不是一个方法,这个属性得到的数据为字符串. 2. 字符串内容 当服务器发送的是一个JsonResponse({' ...

  4. 把C#对象转换为json字符串

    下面的代码写在ashx一般处理程序中 声明context.Response.ContentType = "application/json";代表服务器端返回的数据为json字符串 ...

  5. 使用python将mysql数据库的数据转换为json数据

    由于产品运营部需要采用第三方个推平台,来推送消息.如果手动一个个键入字段和字段值,容易出错,且非常繁琐,需要将mysql的数据转换为json数据,直接复制即可. 本文将涉及到如何使用Python访问M ...

  6. Django 将数据库查出的 QuerySet 对象转换为 json 字符串

    通过Django查询出MySQL数据库的数据,并将查询出的QuerySet 对象转化成 json 字符串. 写这个例子的作用主要是用来为手机端提供接口用,记录一下,以后 说不准 肯定能用到! ---- ...

  7. 基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

  8. 数据转换为json格式的方法

    数据转换为json格式: 如果一张表中存在主外键关系,模板自动生成的类是不可以转换成JSON格式的,此时需要重新写一个类,类前面需加[DataContract],字段前需加[DataMember],实 ...

  9. DataTable 对象 转换为Json 字符串

    /// <summary> /// DataTable 对象 转换为Json 字符串 /// </summary> /// <param name="dt&qu ...

随机推荐

  1. @Html.DropDownList()的四种用法及自定义DropDownList扩展

    https://blog.csdn.net/xiaouncle/article/details/82856982

  2. C++-POJ2975-Nim

    题目把Nim游戏为什么可以取异或和讲解得十分清楚,建议多读几次,理解一下 再一个,可以把每次异或视为一次取数,因此(k[i]^sg)<k[i]即为一种可行操作 /* Nim is a 2-pla ...

  3. JMeter CSRFToken认证登陆(正则提取器的使用)

    转自:http://blog.csdn.net/lion19930924/article/details/51189210 前几天用JMeter模拟登陆,但是这个网站开启了csrf认证,因此在post ...

  4. java基础(三)之面向对象编程

    对象的创建方法 语法: class 类名{ 属性; 方法; } 生成对象的方法 类名 对象名 = new 类名(); Dog dog = new Dog(); 对象的使用方法1.对象.变量;2.对象. ...

  5. WebRTC笔记(一)

    来源<WebRTC权威指南> 1 WebRTC特点 对等连接(Peer Connection):浏览器与浏览器(万维网上的任意两个通信终端)之间的连接(P2P) 信令服务器:在浏览器和对等 ...

  6. 140. 单词拆分 II

    Q: 给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,在字符串中增加空格来构建一个句子,使得句子中所有的单词都在词典中.返回所有这些可能的句子. 说明: 分隔时可以重复使用字典 ...

  7. AcWing 906. 区间分组

    //1.将所有区间按左端点从小到大排序 //2.从前往后处理每个区间,判断能否将其放到某个现有的组中 //判断某一组的最后一个区间的右端点是否小于该区间的左端点 //如果大于或等于,就开新组,如果小于 ...

  8. torchvision的理解和学习 加载常用数据集,对主流模型的调用.md

    torchvision的理解和学习 加载常用数据集,对主流模型的调用 https://blog.csdn.net/tsq292978891/article/details/79403617 加载常用数 ...

  9. php设计模式之单例实例代码

    <?php header("Content-type:text/html;charset=utf-8"); /** * 第一步,分别实例化 */ /*class Single ...

  10. jQuery对象和语法

    jQuery类型 引入jquery.js时,其实是向全局作用域中,添加了一个新的类型--jQuery. 构造函数:负责创建jQuery类型的对象. 原型对象:保存jQuery对象可用的所有简化版API ...