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实现div跟随鼠标移动
Aug 20 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
jQuery实现简单QQ聊天框
Aug 27 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
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
python内置数据类型之列表操作
2018/11/12 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
2015年公司中秋节致辞
2015/07/31 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
七年级话题作文之执着
2019/11/19 职场文书
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python