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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 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
我的论坛源代码(四)
2006/10/09 PHP
详解PHP队列的实现
2019/03/14 PHP
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
python绘制直线的方法
2018/06/30 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
python2 对excel表格操作完整示例
2020/02/23 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
党校学习思想汇报
2014/01/06 职场文书
模范家庭事迹材料
2014/02/10 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
英文升职感谢信
2015/01/23 职场文书
扬州个园导游词
2015/02/06 职场文书
死者家属慰问信
2015/03/24 职场文书
校车安全管理责任书
2015/05/11 职场文书
Python Parser的用法
2021/05/12 Python
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python