打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
通过Javascript实现把数组里的内容以表格方式呈现到页面从

文章标签: javascript js html vue python
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
版权

一、把数组里的内容呈现到页面从,以表格方式

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. .tb,th,td{
  7. border: 1px solid #CC5D5E;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <table class="tb">
  13. <th>ID</th>
  14. <th>姓名</th>
  15. <th>年龄</th>
  16. </table>
  17. <script>
  18. var Data=[
  19. {id:1, name:"小米", age:18},
  20. {id:2, name:"小明", age:10},
  21. {id:3, name:"小菜", age:20}
  22. ]
  23. var tbody=document.querySelector("tbody")
  24. Data.forEach(function(i){
  25. //i代表数组中的每一个对象
  26. //创建一个tr
  27. var tr=document.createElement("tr")
  28. //循环遍历i对象
  29. for(var key in i){
  30. //创建td标签
  31. var td=document.createElement("td")
  32. //向td标签里插入(修改)内容
  33. var cc=td.innerText=i[key]
  34. //向tr标签里插入td标签(有内容)
  35. tr.appendChild(td)
  36. }
  37. //向tbody元素里插入tr标签
  38. tbody.appendChild(tr)
  39. })
  40. </script>
  41. </body>
  42. </html>
文章知识点与官方知识档案匹配,可进一步学习相关知识
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
JavaScript动态生成表格
tbody的使用方法
表格标签-三行三列
代码入门教程(28)
Python零基础,如何快速学爬虫技术
tabbedPanel标签
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服