js读取csv文件并使用json显示出来
2015-01-09 10:40
771 查看
摘要:
前面分享了用js将json数据下载为csv文件,方便后期管理。但是对于测试人员更希望能够以页面的形式展现任务,所以就做了一个将csv文件展现在页面上的例子。
代码:
复制代码 代码如下:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>csv</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="./papaparse.min.js"></script>
<style>
html,body{
font-size: 14px;
font-family: 'Microsoft Yahei',Tahoma,Verdana,simsun,sans-serif;
}
table {width: 85%;margin: 30px auto;}
</style>
</head>
<body>
<table id="table" border="1">
<caption>CSV转JSON</caption>
<thead>
<tr>
<th>Vehicle</th>
<th>Date</th>
<th>Location</th>
<th>Speed</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
Papa.parse('./Result.csv', {
download: true,
complete: function(results) {
var data = results.data, html;
for(var i = 1, _l = data.length-1; i < _l; i++) {
var item = data[i];
html += '<tr><td>'+item[0].substring(1)+'</td><td>'+item[1].substring(1)+'</td><td>'+item[2].substring(1)+'</td><td>'+item[3].substring(1)+'</td></tr>';
}
$('#table tbody').append(html);
}
});
</script>
</body>
</html>
效果图:
注意:上面的例子需要服务环境
您可能感兴趣的文章:
相关文章推荐
- js读取csv文件并使用json显示出来
- js读取csv文件为json显示
- 从php获取json数据使用js读取显示到网页笔记
- 使用js实现读取csv文件内容解析到html页面中
- IT咨询顾问:一次吐血的项目救火 java或判断优化小技巧 asp.net core Session的测试使用心得 【.NET架构】BIM软件架构02:Web管控平台后台架构 NetCore入门篇:(十一)NetCore项目读取配置文件appsettings.json 使用LINQ生成Where的SQL语句 js_jquery_创建cookie有效期问题_时区问题
- 关于chrome浏览器下使用js读取本地json文件时提示“Origin null is not allowed by Access-Control-Allow-Origin”问题
- js文件里有中文时显示出来是乱码解决
- Silverlight4使用radgridview读取导出CSV文件
- 使用Form验证,未登录时登录页面无法显示图片、css、js文件的解决方法
- IE下使用控件实现读取本地文件功能并显示
- 使用getJSON方法读取json文件数据并处理
- 使用asp.net将图片上传并存入SqlServer中,然后从SqlServer中读取并显示出来
- 读取并显示 CSV 文件的整个内容
- 使用Robot从txt文件中读取不同行的内容并显示(续)
- 汇编语言:请写一个程序把当前目录下的TEXT.TXT文件中的字符读出来显示在屏幕上,当遇到结束符时就停止读取。
- 读取本地JSON文件并显示
- 使用VC实现读取指定路径下的文件,并显示所有文件的文件名和文件图标
- VC6.0中使用Stream Object读取数据中流文件并显示Bmp,JPG等图片
- 如何读取EXCEL 表格文件并使他在WEB网页上显示(使用ASP.NET)
- php读取csv文件后,uft8 bom导致在页面上显示出现问题