javascript - 使用 jQuery 或 Javascript 将对象数组转换为 HTML 表格

标签 javascript jquery html


如何转换以下 Javascript 对象数组

 [{"firstName":"John", "last Name":"Doe", "age":"46"},
 {"firstName":"James", "last Name":"Blanc", "age":"24"}]

进入如下HTML表格

<table>
   <tr>
      <th>firstName</th>
      <th>last Name</th>
      <th>age</th>
   </tr>
   <tr>
      <td>John</td>
      <td>Doe</tD>
      <td>46</th>
   </tr>
   <tr>
      <td>James</td>
      <td>Blanc</tD>
      <td>24</th>
   </tr>
</table>

提前致谢。

最佳答案

您可以使用 forEach 方法执行此操作,该方法接受 callback 提供的函数作为参数。

var users=[{"firstName":"John", "last Name":"Doe", "age":"46"},
 {"firstName":"James", "last Name":"Blanc", "age":"24"}]
users.forEach(function(item){
  $('tbody').append('<tr><td>'+item.firstName+'</td><td>'+item["last Name"]+'</td><td>'+item.age+'</td></tr>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>firstName</th>
<th>last Name</th>
<th>age</th>
</tr>
</thead>
<tbody>

</tbody>
</table>

关于javascript - 使用 jQuery 或 Javascript 将对象数组转换为 HTML 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44127872/

相关文章:

javascript - 为什么 $data 引用在此示例中不起作用?

javascript - 类型错误 : Cannot read property 'then' of undefined #2

javascript - 如何通过 javascript/jquery 自动聚焦新生成的文本框

html - 与 IE、Firefox 和 Chrome 兼容的 CSS 下拉菜单(无 float /无 float )

Javascript:在页面加载时按类名获取所有元素不起作用

php - 如何在从数据库中获取字符串以在 FPDF 上查看时打断

javascript - 如何将ajax变量值传递给codeigniter中的 Controller

javascript - 如何使用PHP提交Jquery Add Rows数据到mysql

javascript - JS/jQuery : Is it possible to extract content from the browser's console?

javascript - 视频标签现在在 Safari 中不起作用