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标签填充,才能达到想要的效果

  • 相关阅读:
    PHP实现html字符实体转汉字
    利用 secureCRT 直接上传下载文件 (sz,rz)
    CentOS安装scp命令
    以Apache模块的方式编译安装php-5.5.4
    编译安装 apache 2.4.6
    协方差Covariance的表述推导
    Java _ JDK _ Arrays, LinkedList, ArrayList, Vector 及Stack
    Java_一些特殊的关键字详(?)解
    Java_你应该知道的26种设计模式
    排序与搜索一览
  • 原文地址:https://www.cnblogs.com/hanyining/p/5470610.html
Copyright © 2011-2022 走看看