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卸载全部事件的思路详解
Apr 03 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jQuery实现滑动开关效果
Aug 02 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
2020最新CPU的性能排名
2020/04/02 数码科技
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python中的两个内置模块介绍
2015/04/05 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
python rsa 加密解密
2017/03/20 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
python超时重新请求解决方案
2019/10/21 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
python连接PostgreSQL过程解析
2020/02/09 Python
简单了解python列表和元组的区别
2020/05/14 Python
struct和class的区别
2015/11/20 面试题
linux面试题参考答案(8)
2016/04/19 面试题
简历的自我评价范文
2014/02/04 职场文书
社区母亲节活动方案
2014/03/05 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
企业精神口号
2014/06/11 职场文书