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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jquery实现聊天机器人
Feb 08 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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/08/21 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
python 编码规范整理
2018/05/05 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
Python 如何展开嵌套的序列
2020/08/01 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
中学教师自我鉴定
2014/02/07 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
工作一年自我鉴定
2019/06/20 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python