堆棧內存溢出
  簡體   English   中英

將數組中的數據填充到html表中

[英]Populate data from an array into an html table

 原文  2015-02-12 23:24:52  1   2    javascript/ jquery/ html/ css

問題描述

<!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

2 個解決方案

解決方案1
 1 已采納  2015-02-12 23:49:37

好吧，這行得通，我希望這是您想要的。

該答案的重點是讓您注意for loop以了解如何訪問對象數據。 我相信您之后可以改善處理數據的方式。 

 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>

希望對您有所幫助。 編碼愉快！

解決方案2
 1  2015-02-12 23:53:03

你可以做一些像這樣使用jQuery。

遍歷對象並使用點符號訪問其屬性。

例如： object.user_firstname

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 用數組數據的 javascript 數組填充 html 表？ 從javascript數組格式填充HTML表 使用來自字符串數組的字符填充HTML表 從Javascript數組填充HTML表 從javascript數組填充HTML表 如何用數據數組填充HTML表？ 用javascript數組填充html表 使用JSON數組中的某些項填充HTML表 使用數組中的多個值范圍填充html表 如何從HTML表格數據填充JavaScript模型
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM