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 ...
随机推荐
- 35、XPath的使用示例
使用Xpath获取页面元素 [参见W3C官网说明] http://www.w3school.com.cn/xpath/xpath_syntax.asp 以下Xpath路径都是获取下面地址的元素 ...
- php-fpm 进程在云服务器cpu分配不均匀
8核的云服务器,开了200个php-fpm进程,用top命令查看 大部分进程都在cpu 0 上跑着,导致其他cpu 负载很低,cpu分配不均匀: 使用shell 解决问题: 列出所有php-fpm ...
- C#读写txt文件的方法
1.添加命名空间 System.IO; System.Text; 2.文件的读取 #region 读取TXT文本文件 /// <summary> /// FileStream读取文本文件 ...
- pycharm乱码
1.文件编码类型 2.查看IDE编码类型
- ios 你必须了解的系统定义宏使用
1. UNAVAILABLE_ATTRIBUTE __attribute__((unavailable)) - (instancetype)init UNAVAILABLE_ATTRIBUTE; 告诉 ...
- #include stdio.h(3)
#include <stdio.h> int main() { /* * ** *** **** ***** */ ;a<;a++) { printf("\n") ...
- better-scroll 遇到的问题 2
问题的描述: 在歌曲列表页面使用了scroll插件,搜索了很多歌曲,页面出现滚动,选择播放一首歌曲,弹出播放器,将播放器最小化,页面回到歌曲列表,并且页面的底部出播放歌曲的信息(在没有播放歌曲的时候是 ...
- vue安装--使用node
总结: # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-proj ...
- Web前端开发规范(二)
3.HTML代码规范 .html文件必须存放在项目工程约定的目录中. .html文件的命名:以模块 + 功能的结合方式来命名,比如:newsList.html. 文档类型声明:HTML4中使用< ...
- Java集合集锦
1.介绍Collection框架的结构 集合是Java中的一个非常重要的一个知识点,主要分为List.Set.Map.Queue三大数据结构.它们在Java中的结构关系如下: Collection接口 ...