个人中心
gpt4 book ai didi

javascript - 将数组中的数据填充到 html 表中

转载 作者：行者123 更新时间：2023-11-28 16:35:58 24 4
gpt4 key购买 nike 

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<body>      
  <!-- begin template -->
  <div class="dataTable_wrapper">
    <table class="table table-striped table-bordered table-hover" id="dataTables-example">
      <thead>
        <tr>
          <th>Name</th>
          <th>Relevant Tag Info</th>
          <th>Rating</th>
          <th>Track</th>
          <th>Edit</th>
        </tr>
      </thead>
      <tbody>
        <tr class="odd gradeX">
          <td>James Bond</td>
          <td>Relevant Tag Info</td>
          <td>4 Stars</td>
          <td class="center">Track</td>
          <td class="center">Edit</td>
        </tr>
        <tr class="odd gradeX">
          <td>James Bond</td>
          <td>Relevant Tag Info</td>
          <td>4 Stars</td>
          <td class="center">Track</td>
          <td class="center">Edit</td>
        </tr>
        <tr class="odd gradeX">
          <td>James Bond</td>
          <td>Relevant Tag Info</td>
          <td>4 Stars</td>
          <td class="center">Track</td>
          <td class="center">Edit</td>
        </tr>
        <tr class="odd gradeX">
          <td>James Bond</td>
          <td>Relevant Tag Info</td>
          <td>4 Stars</td>
          <td class="center">Track</td>
          <td class="center">Edit</td>
        </tr>
        <tr class="odd gradeX">
          <td>James Bond</td>
          <td>Relevant Tag Info</td>
          <td>4 Stars</td>
          <td class="center">Track</td>
          <td class="center">Edit</td>
        </tr>
        <tr class="odd gradeX">
          <td>James Bond</td>
          <td>Relevant Tag Info</td>
          <td>4 Stars</td>
          <td class="center">Track</td>
          <td class="center">Edit</td>
        </tr>
        <tr class="odd gradeX">
          <td>James Bond</td>
          <td>Relevant Tag Info</td>
          <td>4 Stars</td>
          <td class="center">Track</td>
          <td class="center">Edit</td>
        </tr>
        <tr class="odd gradeX">
          <td>James Bond</td>
          <td>Relevant Tag Info</td>
          <td>4 Stars</td>
          <td class="center">Track</td>
          <td class="center">Edit</td>
        </tr>
        <tr class="odd gradeX">
          <td>James Bond</td>
          <td>Relevant Tag Info</td>
          <td>4 Stars</td>
          <td class="center">Track</td>
          <td class="center">Edit</td>
        </tr>
        <tr class="odd gradeX">
          <td>James Bond</td>
          <td>Relevant Tag Info</td>
          <td>4 Stars</td>
          <td class="center">Track</td>
          <td class="center">Edit</td>
        </tr>
        <tr class="odd gradeX">
          <td>James Bond</td>
          <td>Relevant Tag Info</td>
          <td>4 Stars</td>
          <td class="center">Track</td>
          <td class="center">Edit</td>
        </tr>
        <tr class="odd gradeX">
          <td>James Bond</td>
          <td>Relevant Tag Info</td>
          <td>4 Stars</td>
          <td class="center">Track</td>
          <td class="center">Edit</td>
        </tr>
        <tr class="odd gradeX">
          <td>James Bond</td>
          <td>Relevant Tag Info</td>
          <td>4 Stars</td>
          <td class="center">Track</td>
          <td class="center">Edit</td>
        </tr>    
        <tr class="odd gradeX">
          <td>James Bond</td>
          <td>Relevant Tag Info</td>
          <td>4 Stars</td>
          <td class="center">Track</td>
          <td class="center">Edit</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

我正在尝试从中获取数据

var dResponse = [{"user_id":"1","user_firstname":"Mark","user_lastname":"Woo","user_latitude":"37.7902","user_longitude":"-122.458"}, {"user_id":"2","user_firstname":"Hualong","user_lastname":"Chen","user_latitude":"37.7285","user_longitude":"-122.438"},{"user_id":"3","user_firstname":"TFirst","user_lastname":"TLast","user_latitude":"37.7401","user_longitude":"-122.492"},{"user_id":"4","user_firstname":"Zishan","user_lastname":"Budhwani","user_latitude":"37.7298","user_longitude":"-122.47"},{"user_id":"5","user_firstname":"ibian","user_lastname":"hodgson","user_latitude":"37.8014","user_longitude":"-122.427"},{"user_id":"6","user_firstname":"Amos","user_lastname":"Munoz","user_latitude":"37.7367","user_longitude":"-122.439"},{"user_id":"7","user_firstname":"Brennan","user_lastname":"Ramos","user_latitude":"37.7624","user_longitude":"-122.435"},{"user_id":"8","user_firstname":"Cole","user_lastname":"Lott","user_latitude":"37.7607","user_longitude":"-122.462"},{"user_id":"9","user_firstname":"Slade","user_lastname":"Strickland","user_latitude":"37.796","user_longitude":"-122.451"},{"user_id":"10","user_firstname":"Isaiah","user_lastname":"Gibbs","user_latitude":"37.7536","user_longitude":"-122.464"}];

并将每条数据分配到正确的类别中。

示例:User_id:1 应该创建具有名字、姓氏、纬度和经度的第一个用户。

看起来像:

名字:姓氏:纬度:经度:

吴宇森 37.7902 -122.458

最佳答案

好吧，我希望这就是您要找的。

此答案的要点是让您注意for 循环 以了解您如何访问对象数据。我相信在那之后您可以改进处理数据的方式。 

function Table(){
var dResponse = [
    {"user_id":"1","user_firstname":"Mark","user_lastname":"Woo","user_latitude":"37.7902","user_longitude":"-122.458"},
    {"user_id":"2","user_firstname":"Hualong","user_lastname":"Chen","user_latitude":"37.7285","user_longitude":"-122.438"},
    {"user_id":"3","user_firstname":"TFirst","user_lastname":"TLast","user_latitude":"37.7401","user_longitude":"-122.492"},
    {"user_id":"4","user_firstname":"Zishan","user_lastname":"Budhwani","user_latitude":"37.7298","user_longitude":"-122.47"},
    {"user_id":"5","user_firstname":"ibian","user_lastname":"hodgson","user_latitude":"37.8014","user_longitude":"-122.427"},
    {"user_id":"6","user_firstname":"Amos","user_lastname":"Munoz","user_latitude":"37.7367","user_longitude":"-122.439"},
    {"user_id":"7","user_firstname":"Brennan","user_lastname":"Ramos","user_latitude":"37.7624","user_longitude":"-122.435"},
    {"user_id":"8","user_firstname":"Cole","user_lastname":"Lott","user_latitude":"37.7607","user_longitude":"-122.462"},
    {"user_id":"9","user_firstname":"Slade","user_lastname":"Strickland","user_latitude":"37.796","user_longitude":"-122.451"},
    {"user_id":"10","user_firstname":"Isaiah","user_lastname":"Gibbs","user_latitude":"37.7536","user_longitude":"-122.464"}
];
 // Target the Table you want to insert the Data to
var results=document.getElementById('Results');
results.innerHTML += "<tr><td>User ID</td><td>First Name</td><td>Last Name</td><td>latitude</td><td>longitude</td></tr>";
			for(var obj in dResponse){
      //Loop through the object to get each objects data
results.innerHTML += "<tr><td>"+dResponse[obj].user_id+"</td><td>"+dResponse[obj].user_firstname+"</td><td>"+dResponse[obj].user_lastname+"</td><td>"+dResponse[obj].user_latitude+"</td><td>"+dResponse[obj].user_longitude+"</td></tr>";
			}

}
window.onload=Table;
<table id="Results">
</table>

希望对您有所帮助。编码愉快!

关于javascript - 将数组中的数据填充到 html 表中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28489817/

24 4 0
文章推荐： html -
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com