核心代码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. matlab中的数组与矩阵

    今天做图像处理时,看到一个矩阵的处理,简要谈谈下面几段代码: 首先是介绍矩阵(说明:在matlab中无是数组还是矩阵都是按列来存储的) 首先是一些特殊矩阵的建立 zeros(m,n)%建立全0矩阵 o ...

  2. matplotlib 画封闭图像并填充

    1.画矩形 这个费了我半天劲,不知怎么就可以了. 复制来自:https://www.cnblogs.com/ymjyqsx/p/7390288.html import  matplotlib.pypl ...

  3. goto语句的本质

    除非跳出多个循环嵌套和远程注入技术,否则尽量少用goto goto会降低程序的可读性,让代码难以调试 利用递归也可以实现循环结构和do while类似 #define _CRT_SECURE_NO_W ...

  4. Codeforces Round #570 (Div. 3) B. Equalize Prices

    原文链接https://codeforces.com/contest/1183/problem/B 题意:进行Q组测试,在每组中有长度为n的数组a[i],然后现在给你一个K,问你找到一个bi使得|ai ...

  5. 关于#progma comment 中库文件相对路径问题 (转)

    最近做一个验证程序的对话框编程,因为里面要要用到静态链接库,所以就稍微的学习了下静态链接库知识,学习的过程中感觉到了自己所了解的东西实在是少的可怜,更加坚定了自己要更加上进的决心,要把以前所丢掉的都给 ...

  6. yii2 场景使用

    场景定义 //场景 const SCENARIO_USER_CREATE='0';//前台用户新增 const SCENARIO_USER_UPDATE='1';//前台用户更新 场景配置 publi ...

  7. bugku 有一张图,还单纯吗

    下载图片后以多种方式打开.分析文件类型都没能找到flag.推测存在隐藏文件,即文件可分离. 注:文件分离需要 binwalk 工具,在Ubuntu操作系统下 binwalk 的安装方法可参考此博客:h ...

  8. 【C语言】移动指针

    移动指针 #include<stdio.h> int main() { char *s="哈哈哈哈哈哈"; for(*s;s!="\0";s++) ...

  9. maven一直加载2.0.0.M7 的 config server 失败

    之前学习的时候使用F版的SpringBoot管理项目依赖一直好好的,今天不知idea为何抽疯,一直加载失败,各种重启,清除,没用 只能像之前学习注册consul 时将F版的SpringBoot 改为G ...

  10. 题解 P3951 小凯的疑惑

    P3951 小凯的疑惑 数论极菜的小萌新我刚看这题时看不懂exgcd做法的题解,后来在网上找到了一篇博客,感觉代码和推导都更加清新易懂,于是在它的基础上写了题解qwq 分析 两数互质,且有无限个,想到 ...