• 【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 

  • 相关阅读:
    C. Discrete Acceleration(浮点二分)
    倍福TwinCAT3.0软件与C++通讯问题（EAP通讯）
    SqlBoy:打折日期交叉问题
    React-hooks有哪些 包括用法是什么？
    Nodejs安装及环境配置
    Json-server 模拟后端接口
    6 个可解锁部分 GPT-4 功能的 Chrome 扩展（无需支付 ChatGPT Plus 费用）
    Pytorch详细教程——13.Code For Deep Learning
    Pyecharts | 《白蛇2:青蛇劫起》20000+数据分析可视化
    低代码治理及其必要性
  • 原文地址：https://blog.csdn.net/sunriver2000/article/details/133437695