js循环读取json数据,将读取到的数据用js写成表格

①js循环读取json数据的方式:
var data=[{"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},{"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},{"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},{"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},{"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23}]
for(var i=0;i<data.length;i++){
alert(i);
alert(data[i]);
alert("id:"+data[0].uid+"name:"+data[0].uname);
②将读取到的数据用js写成表格:
html部分:
<table id="table">
<tr>
<th>uid</th>
<th>uname</th>
<th>sum</th>
</tr>
</table>
js部分:
window.onload=function(){
var data=[{"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},{"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},{"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},{"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},{"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23}]
/*for(var i=0;i<data.length;i++){
alert(i);
alert(data[i]);
alert("id:"+data[0].uid+"name:"+data[0].uname)
}*/js循环读取json数据
var table=document.getElementById("table");
for(var i=0;i<data.length;i++){
var row=table.insertRow(table.rows.length);
var c1=row.insertCell(0);
c1.innerHTML=data[i].uid;
var c2=row.insertCell(1);
c2.innerHTML=data[i].uname;
var c3=row.insertCell(2);
c3.innerHTML=data[i].sum;
}
}
运行结果:

表格样式可在css中自定义。
如有疑问,可留言!

js循环读取json数据,将读取到的数据用js写成表格的更多相关文章
- JS 循环遍历JSON数据 分类: JS技术 JS JQuery 2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options":"[{
JS 循环遍历JSON数据 分类: JS技术 JS JQuery2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options&q ...
- JS 循环遍历JSON数据
JSON数据如:{"options":"[{/"text/":/"王家湾/",/"value/":/" ...
- JS循环遍历JSON数据的方法
JSON数据如:{"options":"[{/"text/":/"王家湾/",/"value/":/" ...
- js循环便利json数据
var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name: ...
- JS 循环遍历json
第一 看看json的格式 { "employees": [ { "firstName":"Bill" , "lastName&q ...
- JS对象与json字符串格式
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- 浅谈JSON与与JS相关的JSON函数
本文内容主要引用在微信公众号上看到的一片文章,因为自己对Json了解不是很深入,所以就整理出这篇博文与大家分享! 一. JSON是一种格式,基于文本,优于轻量,用于交换数据 1.一种数据格式 数据的传 ...
- Js循环读取JSON数据
<script> $(function () { var jsonString = '{Unid:"1",CustomerName:"宋江",Age ...
- js读取json数据(php传值给js)
<?php $array =array('fds','fdsa','fdsafasd'); // json_encode($array); ?> <html> <hea ...
随机推荐
- ubuntu使用ppa源安装最新版本的git
国内也有ubuntu镜像源.但是里面的git都是1.9版本.最新的已经是2.3了 1 首先使用将ppa源加入Ubuntu,交大家 sudo add-apt-repository ppa:pdoes/p ...
- php验证码处理
//基本步骤 1,先创建一张指定宽度和高度的一张验证码图片 imagecreatetruecolor() 2,给验证码图片添加背景颜色 和文字颜色 imagecolorallocate() 3, 在指 ...
- 类模版的static成员
类模版中声明static成员 template <class T> class Foo { public: static size_t count() { ++ctr; cout < ...
- 负载均衡配置下的不同服务器【Linux】文件同步问题
负载均衡配置下的不同服务器[Linux]文件同步问题2017年04月13日 22:04:28 守望dfdfdf 阅读数:2468 标签: linux负载均衡服务器 更多个人分类: 工作 问题编辑版权声 ...
- Java-Excel写与读
很多时候,一个软件应用程序需要生成Microsoft Excel文件格式的报告.有时,一个应用程序甚至希望将Excel文件作为输入数据.例如,一个公司开发的应用程序将财务部门需要所有输出生成自己的Ex ...
- Java方法命名之“由简入繁”原则
1.访问控制层(Controller 层)中的方法命名方向是简洁明了,向着自然化语言方向靠拢,比如“更新用户”,建议命名为“updateUser”,而非“updateUserById”,实际上我们更新 ...
- rem与em的区别
这两个单位都是相对元素 rem相对根元素 em相对于父级元素
- Native Method
While a 100% pure Java solution is nice in principle, realistically, for an application, there are s ...
- Eclipse + Tomcat 环境下配置 JSTL 标签
1.下载 jar 包. 网址:http://archive.apache.org/dist/jakarta/taglibs/standard/binaries/ 2.解压后将jstl.jar和stan ...
- JavaScript基础:比较运算符——==与 ===;!=与!==
var x=10, y="10", m=15 x==y;//返回true x===y;//返回false x!=y;//返回false x!==y;//返回true//同理cons ...