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.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery实现tab栏切换效果
Dec 22 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中的比较运算符详解
2013/10/28 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
js读写json文件实例代码
2014/10/21 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
Python中IPYTHON入门实例
2015/05/11 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
python生成带有表格的图片实例
2019/02/03 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python3如何判断三角形的类型
2020/04/12 Python
keras 读取多标签图像数据方式
2020/06/12 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
毕业求职自荐信格式是什么
2013/11/19 职场文书
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
捐书倡议书
2014/08/29 职场文书
财务部会计岗位职责
2015/02/03 职场文书
2016公司年会主持词
2015/07/01 职场文书
高三物理教学反思
2016/02/20 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python