• 【JavaScript】读取本地json文件并绘制表格

    本文为避免跨域问题，使用了改造过的本地json文件的方法实现读取json数据并绘制表格。

    如果发起http请求获取本地 json文件中数据，需要架设本地服务器，本文不做阐述。

    概述

    1、json在本地，并不需要从服务器下载。

    2、采用jquery的each方法和for循环实现遍历。

    解决方法

    1、Json文件

    为避免跨域问题，适当对json文件进行改造：增加了“var jsonData = ”字段。

    1. var jsonData = {
    2.     "total": 3,
    3.     "rows": [
    4.         {
    5.             "Name": "张三",
    6.             "Sex": "男",
    7.             "CardId": "112233",
    8.         },
    9.         {
    10.             "Name": "李四",
    11.             "Sex": "女",
    12.             "CardId": "111111"
    13.         },
    14.         {
    15.             "Name": "王五",
    16.             "Sex": "男",
    17.             "CardId": "222222"
    18.         }
    19.     ]
    20. }

    2、例子

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>json文件数据渲染title>
    9.     <script src="plugins/jquery3.3.1.min.js">script>
    10.     <script type="text/javascript" src="plugins/data.json">script>
    11.     <style>
    12.         .divcss5 {
    13.             width: 400px
    14.         }
    15.  
    16.         .divcss5 table {
    17.             border-color: #000000;
    18.             line-height: 30px;
    19.             text-align: center;
    20.         }
    21.  
    22.         .divcss5 table thead {
    23.             color: #000000;
    24.             background-color: #00FFFF;
    25.             font-size: 20px;
    26.             font-weight: 900;
    27.         }
    28.  
    29.         .divcss5 table tbody {
    30.             color: #FF0000;
    31.             background: #C0FFFF;
    32.             font-size: 20px;
    33.             font-weight: 200;
    34.         }
    35.     style>
    36.  
    37. head>
    38.  
    39. <body>
    40.     <div class="divcss5">
    41.         <table width="95%" border="1" cellspacing="1" cellpadding="0">
    42.             <thead>
    43.                 <tr>
    44.                     <td>姓名td>
    45.                     <td>性别td>
    46.                     <td>身份证td>
    47.                 tr>
    48.             thead>
    49.             <tbody id="jsonTip">
    50.  
    51.             tbody>
    52.         table>
    53.     div>
    54.  
    55.  
    56.     <script>
    57.         // 页面加载完后立刻调用getDate方法
    58.         $(function () {
    59.  
    60.             console.log("json文件数据", jsonData);
    61.             getShow(jsonData);
    62.         })
    63.  
    64.         function getShow(data) {
    65.             var $jsontip = $("#jsonTip");
    66.             // 定义一个变量存储要显示的数据
    67.             var s = "";
    68.             // 清空数据
    69.             $jsontip.empty();
    70.             // 遍历拿到的数据（此处采用each方法，也可以采用for循环）
    71.             $.each(data.rows, function (index, info) {
    72.                 s = "" + info.Name + "" + info.Sex + "" +
    73.                     info.CardId + "";
    74.                 // 将要展示的数据追加到页面
    75.                 $jsontip.append(s);
    76.             })
    77.         }
    78.     script>
    79.  
    80. body>

    效果：

    关注博主：https://blog.csdn.net/sunriver2000 

  • 相关阅读:
    网络路由详解
    yarn container的进程以及kill动作的逻辑
    Android请求应用权限
    【数据结构】二叉树的遍历：前序，中序，后序的递归结构遍历
    深入Java微服务之网关系列1：什么是网关
    OpenSSL 密码库实现证书签发流程详解
    基于三维Voronoi图划分的加权混合回归定位算法
    用于生物分子修饰的Alkyne NHS ester，906564-59-8
    【MyBatis笔记01】MyBatis框架介绍以及开发环境搭建
    git的安装 及 命令
  • 原文地址：https://blog.csdn.net/sunriver2000/article/details/133437695