获取表格数据转换为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"}]
获取表格数据转换为JSON字符串的更多相关文章
- php pdo 获取数据转换为json
php 查询语句获取数据,数据库有好多表现形式,如何拿出自己需要的数据 $raceSQL ='select id, race_name,race_code,content from je_race ' ...
- struts2:JSON在struts中的应用(JSP页面中将对象转换为JSON字符串提交、JSP页面中获取后台Response返回的JSON对象)
JSON主要创建如下两种数据对象: 由JSON格式字符串创建,转换成JavaScript的Object对象: 由JSON格式字符串创建,转换成JavaScript的List或数组链表对象. 更多关于J ...
- [TimLinux] JavaScript AJAX接收到的数据转换为JSON格式
1. 接收数据 AJAX接收数据是通过xhr.responseText属性,这是一个属性不是一个方法,这个属性得到的数据为字符串. 2. 字符串内容 当服务器发送的是一个JsonResponse({' ...
- 把C#对象转换为json字符串
下面的代码写在ashx一般处理程序中 声明context.Response.ContentType = "application/json";代表服务器端返回的数据为json字符串 ...
- 使用python将mysql数据库的数据转换为json数据
由于产品运营部需要采用第三方个推平台,来推送消息.如果手动一个个键入字段和字段值,容易出错,且非常繁琐,需要将mysql的数据转换为json数据,直接复制即可. 本文将涉及到如何使用Python访问M ...
- Django 将数据库查出的 QuerySet 对象转换为 json 字符串
通过Django查询出MySQL数据库的数据,并将查询出的QuerySet 对象转化成 json 字符串. 写这个例子的作用主要是用来为手机端提供接口用,记录一下,以后 说不准 肯定能用到! ---- ...
- 基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<二>
上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...
- 数据转换为json格式的方法
数据转换为json格式: 如果一张表中存在主外键关系,模板自动生成的类是不可以转换成JSON格式的,此时需要重新写一个类,类前面需加[DataContract],字段前需加[DataMember],实 ...
- DataTable 对象 转换为Json 字符串
/// <summary> /// DataTable 对象 转换为Json 字符串 /// </summary> /// <param name="dt&qu ...
随机推荐
- Ecshop各个页面文件介绍,主要文件功能说明
1.模板文件说明 style.css – 模板所使用样式表activity.dwt – 活动列表article.dwt – 文章内容页article_cat.dwt – 文章列表页article_pr ...
- Mysql单实例数据库安装
第1章 MySQL数据库安装 在当今的大中型互联网企业里,MySQL数据库服务几乎都是运行在Linux系列操作系统上,当然,你在可以运行在Windows/Unix等商业操作系统上,大中型互联网企业使用 ...
- 2.spring源码-BeanPostProcessor后置处理之ApplicationContextAwareProcessor,实现spring容器中某一个类的bean对象在初始化时需要得到Spring容器内容。
需求:我们的需求是,在spring初始化完毕时,使我们自定义一个类Bird类可以得到spring容器内容. 实现步骤: 1.首先我们来看一下ApplicationContextAwareProcess ...
- 在GPU上训练数据
在GPU上训练数据 模型搬到GPU上 数据搬到GPU上 损失函数计算搬到GPU上
- 时间日期转换工具类,获取当前时间YYYYMMDD24HHMISS、YYYYMMDDHHMISS
YYYYMMDD24HHMISS:24小时制时间(显示上只是比YYYYMMDDHHMISS中间多了一个24),例:2018102224112440 YYYYMMDDHHMISS:12小时制时间,例20 ...
- IDEA常用操作链接
idea中svn的提交.更新等操作 https://jingyan.baidu.com/article/375c8e19e3c47a25f3a22955.html Idea 部署SVN详细步骤以及上传 ...
- 接口出现无法执行curl 开启cgi
问题描述: 路由能正常访问,但认证失败, 由于请求需要执行,curl -X GET "http://api.jr.com/v1/salary/list" -H "acce ...
- 屏蔽tips
在屏蔽的地方打上记号,这样解屏蔽时就容易找到屏蔽的地方了
- 安装Nginx:通过yum方式
1.配置yum源: 在/etc/yum.repos.d中新建后缀为.repo的文件,此处以nginx.repo为例. 2.更新yum源: yum clean all yum makecache 3 ...
- Dataset数据的XML持久化处理
主要方法是用ADO.NET的DataTale 填充到Dataset Dataset 内置了XML持久化的方法,WriteXML和ReadXML:简单的WinFrom实例:从数据库的表 private ...