核心代码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. Web 开发人员推荐的通用独立 UI 组件

    现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高.在推荐完图形库之后,再来推荐一些精品的独立 UI 组件.这些组件可组合在一起,形成美观而交互强大的 Web UI . 给 We ...

  2. Redis5-集群搭建实验

    集群规划: nodeA:192.168.29.22(22-master,23-slave) nodeB:192.168.29.23(23-master,24-slave) nodeC:192.168. ...

  3. xrdp---远程桌面连接

    xrdp is an Open Source Remote desktop Protocol server, which allows you to RDP to your Linux server ...

  4. d2admin框架学习

    <template slot-scope="scope"> <el-button @click="upper_score(scope.$index, s ...

  5. TNS-12545: Connect failed because target host or object does not exist

    问题描述 $ lsnrctl startLSNRCTL for Linux: Version 12.1.0.2.0 - Production on 26-JUL-2017 09:53:42Copyri ...

  6. 番外:如何克隆可刷新的PDB(Refreshable PDB)

    基于版本:19c (12.2.0.3) AskScuti 创建方法:克隆创建 对应路径:属于克隆.PDB类型为:Refreshable 相关系列请参考<Oracle创建PDB列表文章> 注 ...

  7. document.getElementById("id").value与$("#id").val()之间的区别

    本文链接:https://blog.csdn.net/mottohlm/article/details/78364196....今天在项目中遇到这么一个JS报错:原因是代码中有这么一段:对,就是var ...

  8. python中乱码怎么由来与解决方法

    前言曾几何时 Python 中文乱码的问题困扰了我很多很多年,每次出现中文乱码都要去网上搜索答案,虽然解决了当时遇到的问题但下次出现乱码的时候又会懵逼,究其原因还是知其然不知其所以然.现在有的小伙伴为 ...

  9. jQuery 抖动特效函数封装

    <style> ul{ margin-top: 100px; } li { float: left; margin-left: 20px; position: absolute; top: ...

  10. JS高级---总结apply和call方法的使用

    apply和call的使用方法 apply的使用语法   函数名字.apply(对象,[参数1,参数2,...]); 方法名字.apply(对象,[参数1,参数2,...]);   call的使用语法 ...