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实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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
php 字符串替换的方法
2012/01/10 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
jqTransform美化表单
2015/10/10 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
Python装饰器用法实例总结
2018/02/07 Python
Python3 replace()函数使用方法
2018/03/19 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
python for和else语句趣谈
2019/07/02 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
买卖协议书范本
2014/04/21 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
五好关工委申报材料
2014/05/31 职场文书
2014年部门工作总结
2014/11/12 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
大学副班长竞选稿
2015/11/21 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang