jQuery中将json数据显示到页面表格的方法


Posted in jQuery onMay 27, 2018

jQuery中将json数据显示到页面表格代码。stu模拟的就是一个数据库,假设我们的数据已经是json 的文件格式,接下来就是将这个json文件里面的数据显示到页面的表格上。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
      var stu = [
        { "name": "张三", "sex": "男", "age": "20" },
        { "name": "李四", "sex": "男", "age": "18" },
        { "name": "王五", "sex": "男", "age": "19" }
      ];
      $(document).ready(function() {
        var s = "";
        for(var i = 0; i < stu.length; i++) {
          s = "<tr><td>" + stu[i].name + "</td><td>" + stu[i].sex + "</td><td>" +
            stu[i].age + "</td></tr>";
          $("#tab").append(s);
        }
      });
    </script>
  </head>
  <body>
    <table border="1px" id="tab">
      <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
      </tr>
    </table>
  </body>
</html>

jQuery中将json数据显示到页面表格的方法

以上这篇jQuery中将json数据显示到页面表格的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery仿微信聊天界面
May 06 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jQuery插件jsonview展示json数据
May 26 #jQuery
jQuery插件Validation表单验证详解
May 26 #jQuery
jQuery创建及操作xml格式数据示例
May 26 #jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 #jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 #jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 #jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 #jQuery
You might like
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
php的计数器程序
2006/10/09 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
JS常用函数使用指南
2014/11/23 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
Cython 三分钟入门教程
2009/09/17 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
全球性的女装店:storets
2019/06/12 全球购物
编程输出如下图形
2013/11/24 面试题
金融事务专业毕业生求职信
2014/02/23 职场文书
装修协议书范本
2014/04/21 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
小学见习报告
2015/06/23 职场文书
学校证明范文
2015/06/24 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
Win10 Anaconda安装python-pcl
2022/04/29 Servers
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python