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

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

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

概述

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

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

解决方法

1、Json文件

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

var jsonData = {
    "total": 3,
    "rows": [
        {
            "Name": "张三",
            "Sex": "男",
            "CardId": "112233",
        },
        {
            "Name": "李四",
            "Sex": "女",
            "CardId": "111111"
        },
        {
            "Name": "王五",
            "Sex": "男",
            "CardId": "222222"
        }
    ]
}

2、例子

    
    
    
    
    
    
    




    

        

            

                

                    
姓名
                    
性别
                    
身份证
                
            
            


            
        
    


    

效果：

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