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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 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
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
通过python检测字符串的字母
2020/02/18 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
公积金单位接收函
2014/01/11 职场文书
创先争优制度
2014/01/21 职场文书
贺卡寄语大全
2014/04/11 职场文书
小学班主任评语大全
2014/04/23 职场文书
质量月口号
2014/06/20 职场文书
2015年度企业工作总结
2015/05/21 职场文书
DIY胆机必读:各国电子管评价
2022/04/06 无线电
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers