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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
PHP循环结构实例讲解
2014/02/10 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
小程序转发探索示例
2019/02/19 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
Python单例模式实例分析
2015/01/14 Python
在Python中使用Neo4j的方法
2019/03/14 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
Django实现发送邮件功能
2019/07/18 Python
python next()和iter()函数原理解析
2020/02/07 Python
python 伯努利分布详解
2020/02/25 Python
解决python运行效率不高的问题
2020/07/20 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
超市优秀员工事迹材料
2014/05/01 职场文书
公司建议书怎么写
2014/05/15 职场文书
快递员岗位职责
2014/09/12 职场文书
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android