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输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
php define的第二个参数使用方法
2013/11/04 PHP
PHP内核探索:变量概述
2014/01/30 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
原生js实现无缝轮播图效果
2021/01/28 Javascript
Python实现DDos攻击实例详解
2019/02/02 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
Python修改DBF文件指定列
2020/12/19 Python
举例讲解Python装饰器
2020/12/24 Python
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
法学个人求职信范文
2014/01/27 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
SpringBoot详解执行过程
2022/07/15 Java/Android