获取表格数据转换为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 ...
随机推荐
- Web 开发人员推荐的通用独立 UI 组件
现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高.在推荐完图形库之后,再来推荐一些精品的独立 UI 组件.这些组件可组合在一起,形成美观而交互强大的 Web UI . 给 We ...
- Redis5-集群搭建实验
集群规划: nodeA:192.168.29.22(22-master,23-slave) nodeB:192.168.29.23(23-master,24-slave) nodeC:192.168. ...
- xrdp---远程桌面连接
xrdp is an Open Source Remote desktop Protocol server, which allows you to RDP to your Linux server ...
- d2admin框架学习
<template slot-scope="scope"> <el-button @click="upper_score(scope.$index, s ...
- 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 ...
- 番外:如何克隆可刷新的PDB(Refreshable PDB)
基于版本:19c (12.2.0.3) AskScuti 创建方法:克隆创建 对应路径:属于克隆.PDB类型为:Refreshable 相关系列请参考<Oracle创建PDB列表文章> 注 ...
- document.getElementById("id").value与$("#id").val()之间的区别
本文链接:https://blog.csdn.net/mottohlm/article/details/78364196....今天在项目中遇到这么一个JS报错:原因是代码中有这么一段:对,就是var ...
- python中乱码怎么由来与解决方法
前言曾几何时 Python 中文乱码的问题困扰了我很多很多年,每次出现中文乱码都要去网上搜索答案,虽然解决了当时遇到的问题但下次出现乱码的时候又会懵逼,究其原因还是知其然不知其所以然.现在有的小伙伴为 ...
- jQuery 抖动特效函数封装
<style> ul{ margin-top: 100px; } li { float: left; margin-left: 20px; position: absolute; top: ...
- JS高级---总结apply和call方法的使用
apply和call的使用方法 apply的使用语法 函数名字.apply(对象,[参数1,参数2,...]); 方法名字.apply(对象,[参数1,参数2,...]); call的使用语法 ...