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上传图片显示预览功能
Jun 29 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 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
一个php作的文本留言本的例子(三)
2006/10/09 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
PHP中的表达式简述
2016/05/29 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
js类型检查实现代码
2010/10/29 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
python 运算符 供重载参考
2009/06/11 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
Django缓存Cache使用详解
2020/11/30 Python
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
2015年保险公司工作总结
2015/04/24 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
MySQL约束超详解
2021/09/04 MySQL
Redis的字符串是如何实现的
2021/10/24 Redis
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL