zoukankan      html  css  js  c++  java
  • 如何让一个json文件显示在表格里

    <body>
    //首先得把架子搭起来
    <table id = "tb" border="1">
      <tr></tr>
      <tr></tr>
    </table>
    //js部分
    <script>
    //简单的json内容
    var json = {"姓名":"张三","年龄":"26","性别":"男"};
    //获取tr
    var tr = document.getElementsByTagName('tr');
    //tr1和tr2下面会用到,但是要先声明,给一个空值
    var tr1 = '';
    var tr2 = '';
    //用for in来进行遍历,k是键,json[k]是值
    for(var k in json){
      tr1+='<th>'+k+'</th>';
      tr2+='<td>'+json[k]+'</td>';
    }
    //tr1里放的是键,也就是姓名,年龄,性别,然后把这些信息放到第一个tr里
    tr[0].innerHTML = tr1;
    //tr2里放的是值,也就是张三,26,男,把这些信息放到第二个tr里
    tr[1].innerHTML = tr2;
    </script>

    以前想着如何才能把json的内容动态放到表格里面呢?有时候面试会被问到,当然面试时问的是用ajax如何办到。但是我这里就写个简单的demo,现有的json放到表格里。这个demo我做了好几遍,虽然每次放到表格里,但是样子都很古怪,有可能是一个竖排例如这样

    姓名

    张三

    年龄

    26

    性别

    又有可能是这样

    姓名

    年龄

    性别

    张三

    26

    但是我想要的是这样

    姓名   年龄   性别

    张三    26     男

    在经过几次实验之后,发现需要在html骨架结构上做调整,一开始只放table标签是不行的,得加两个tr标签,最后用js把两个tr标签填充,才能达到想要的效果

  • 相关阅读:
    滚动相册
    智能拼图
    连连看
    魔法色块
    ASP.NET Session的七点认识
    从11月开始windows update速度缓慢,中国反击?
    WM实现文件关联
    与黄河老师合影
    ubuntu8.04笔记本开启无线网卡记得开网卡的电源
    无法在Web服务器上启动调试,与Web服务器通信时出现身份验证错误
  • 原文地址:https://www.cnblogs.com/hanyining/p/5470610.html
Copyright © 2011-2022 走看看