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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
简化版的vue-router实现思路详解
2018/10/19 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
Python数据持久化shelve模块用法分析
2018/06/29 Python
python保存网页图片到本地的方法
2018/07/24 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
用Python 执行cmd命令
2020/12/18 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
SQL中where和having的区别
2012/06/17 面试题
nohup的用法
2014/08/10 面试题
技校生自我鉴定
2013/12/08 职场文书
教育专业自荐书范文
2013/12/17 职场文书
公益活动策划方案
2014/01/09 职场文书
创业计划书模版
2014/02/05 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
个性与发展自我评价
2015/03/06 职场文书
标枪加油稿
2015/07/22 职场文书
关于分班的感言
2015/08/04 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
Nginx动静分离配置实现与说明
2022/04/07 Servers