• js循环读取json数据,将读取到的数据用js写成表格


    ①js循环读取json数据的方式:

    var data=[{"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},{"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},{"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},{"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},{"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23}]
    for(var i=0;i<data.length;i++){
            alert(i);
            alert(data[i]);
            alert("id:"+data[0].uid+"name:"+data[0].uname);

    ②将读取到的数据用js写成表格:

    html部分:

    <table id="table">
        <tr>
            <th>uid</th>
            <th>uname</th>
            <th>sum</th>
        </tr>
    </table>

    js部分:

    window.onload=function(){
    var data=[{"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},{"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},{"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},{"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},{"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23}]
            /*for(var i=0;i<data.length;i++){
            alert(i);
            alert(data[i]);
            alert("id:"+data[0].uid+"name:"+data[0].uname)
        }*/js循环读取json数据
        var table=document.getElementById("table");
        for(var i=0;i<data.length;i++){
            var row=table.insertRow(table.rows.length);
            var c1=row.insertCell(0);
            c1.innerHTML=data[i].uid;
            var c2=row.insertCell(1);
            c2.innerHTML=data[i].uname;
            var c3=row.insertCell(2);
            c3.innerHTML=data[i].sum;
        }
    }

    运行结果:

    表格样式可在css中自定义。

    如有疑问,可留言!

  • 相关阅读:
    Spring Security 自动装配
    Mysql学习
    java 学习路线(bilibili)
    Mac上配置idea的项目上传到GitHub
    vim安装自动补全插件
    spring aop 获取request、response对象
    centos7配置本地yum源 使用安装镜像安装软件
    eclipse启动速度优化
    spring-mvc springboot 使用MockMvc对controller进行测试
    java web 验证码-字符变形(推荐)
  • 原文地址:https://www.cnblogs.com/yuanxinru321/p/7306556.html
Copyright © 2020-2023  润新知