核心代码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. linux centos7环境下安装apache2.4+php5.6+mysql5.6 安装及踩坑集锦(二)

    linux centos7环境下安装apache2.4+php5.6+mysql5.6 安装及踩坑集锦(二) 安装apache web容器 . yum方式安装apache 注意apache在linux ...

  2. DES加密算法 转

    1.什么是对称密码算法 网络安全通信中要用到两类密码算法,一类是对称密码算法,另一类是非对称密码算法.对称密码算法有时又叫传统密码算法.秘密密钥算法或单密钥算法,非对称密码算法也叫公开密钥密码算法或双 ...

  3. pandas包学习笔记

    目录 zip Importing & exporting data Plotting with pandas Visual exploratory data analysis 折线图 散点图 ...

  4. C++-POJ2159-Candies[spfa][栈优化][邻接表]

    #include <cstdio> ,N=; struct edge{int v,w,next;}e[M];int head[N],cnt; void add(int u,int v,in ...

  5. pl/sql developer试用期结束

    (产品代码)Product Code:ljkfuhjpccxt8xq2re37n97595ldmv9kch (序列号)Serial Number:302967 (口令)Password:xs374ca ...

  6. 如何在Word中排出漂亮的代码,去除回车符,去除拼写检查

    这位博主写到很到位,这里补充一下在VBA里用模块的部分. https://blog.csdn.net/code4101/article/details/41802715 1.放代码的方式是贴纯文本. ...

  7. hrtf 旋转音效matlab实现

    原理参考: http://www.mahong.me/archives/97 将音频分段,各个段分别使用hrtf在Ls, L, R, Ls, Rrs, Lrs位置处的filter系数.是声音听起来来自 ...

  8. Tp5整理

    一.命名规则 目录级和文件命名 目录采用小写字母+下划线命名: 类文件名采用驼峰法命名(比如:ArticleDetail.php),其它文件与目录命名规则同: 类名与类文件名须保持一致,采用驼峰法: ...

  9. sql查询 —— 分页

    -- 分页 -- limit -- limit start count (start 显示骑士值,单页数量) select *from student where gender=1 limit 6,3 ...

  10. sftp,ftp文件下载

    一.sftp工具类 package com.ztesoft.iotcmp.util; import com.jcraft.jsch.ChannelSftp; import com.jcraft.jsc ...