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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 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
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
php实现小程序支付完整版
2018/10/09 PHP
jquery.validate分组验证代码
2011/03/17 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
JavaScript中string对象
2015/06/12 Javascript
jQuery的框架介绍
2016/05/11 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
python中字典dict常用操作方法实例总结
2015/04/04 Python
python使用7z解压apk包的方法
2015/04/18 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
便利店投资创业计划书
2014/02/08 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
公司开业致辞
2015/07/29 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书