HTML之动态加载表格数据

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta charset="utf-8">
  <style type="text/css">
    *{
       margin:0px;
       padding:0px;
    }
    body table{
        border:1px solid black;
    }
    th{
        border:1px solid black;
        text-align:center;
        line-height:center;
        width:400px;
        height:30px;
    }
    td{
        border:1px solid black;
        text-align:center;
        line-height:center;
    }
  </style>
 <script type="text/javascript">
  function data(){
    var str="[{'ename':'tom','salary':'3500','age':'25'},{'ename':'jphn','salary':'3800','age':'25'},{'ename':'mary','salary':'3600','age':'25'}]";
    var jsonObject=eval('('+str+')');
    
    for(var i=0;i<jsonObject.length;i++){
      var tr=document.createElement('tr');
      var tdename=document.createElement('td')
      var tdsalary=document.createElement('td')
      var tdage=document.createElement('td')
      tdename.innerHTML=jsonObject[i].ename;
      tdsalary.innerHTML=jsonObject[i].salary;
      tdage.innerHTML=jsonObject[i].age;

      tr.appendChild(tdename);
      tr.appendChild(tdsalary);
      tr.appendChild(tdage);
      var tbody=document.getElementById('tbody');
      tbody.appendChild(tr);
        }
    }
  </script>

 </head>

 <body>
  <table>
   <thead>
    <tr>
      <th>ename</th>
      <th>salary</th>
      <th>age</th>
      <th><input type='button' value='导入数据' οnclick="data()"></th>
    </tr>
   </thead>
   <tbody id='tbody'>
     
   </tbody>
  </table>

 
 </body>
</html>

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/worn_xiao/article/details/52561551
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-07 16:22:53
阅读 ( 803 )
分类：前端

HTML之动态加载表格数据

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看