JavaScript 从数组对象中获取数据并放入 html 表中答案

【问题标题】：JavaScript get data from array object and put into html tableJavaScript 从数组对象中获取数据并放入 html 表中
【发布时间】：2018-10-04 15:56:51
【问题描述】：

我有一个对象，其中存储了数据。我有它，用户可以选择一个选项，然后出现一个结果列表。结果是链接。单击链接后，我希望有关公司的数据显示为表格。唯一的问题是，一旦您单击链接，JavaScript 会从该链接获取数据并将其放入将显示的 html 表中，我不知道如何做到这一点。我的问题是如何将我的 html 元素链接到对象中的数据，然后允许该数据显示在表格中？在不改变我原始代码的方向的情况下。

$("#listingResults").html("Business Listings Under Category <strong>" + textNameOfBusinessSelected + "</strong> are: <br/><br/><ul id='listOfBusinesses'><li><a href='javascript-exercise-16.html#bottomOfPage' onclick='clickListingLink()'>" + businessListNames.join("<br/><a href='javascript-exercise-16.html#bottomOfPage' onclick='clickListingLink()'><li>") + "</li></ul>");
} // line closes function


function clickListingLink() {
  // function is for when a link is clicked after list of businesses appear
  $('#listOfBusinesses').on('click','li', function(){     
    clickListingLink(); 
    console.log('you clicked me'); 
    seeListingInfoTable(); 
    $("hr").show();    
  });
}

function seeListingInfoTable(titleOfBusinessSelected, businessLinkSelected) {
  // function is for table that shows info of specific link clicked 
  console.log("apple");
  var tbl = "";
    tbl += '<table class="table table-hover">';
    tbl += '</table>';
      tbl += '<tbody>';
      tbl += '<caption class="listingTitle">' + titleOfBusinessSelected + '</caption>';
      tbl += '<tr>';
      tbl += '<th>Address</th>';
      tbl += '<th>Phone Number</th>';
      tbl += '<th>Website</th>';
      tbl += '<th>Specialty</th>';
      tbl += '</tr>';
      tbl += '<tr>';
      tbl += '<td><div class="row_data" edit_type="click" col_name="fname">' + businessLinkSelected["Address"] + '</div></td>';
      tbl += '<td><div class="row_data" edit_type="click" col_name="fname">' + businessLinkSelected["Phone Number"] + '</div></td>';
      tbl += '<td><div class="row_data" edit_type="click" col_name="fname">' + businessLinkSelected["Website"] + '</div></td>';
      tbl += '<td><div class="row_data" edit_type="click" col_name="fname">' + businessLinkSelected["Specialty"] + '</div></td>';
      tbl += '</tr>';
    tbl += '</tbody>';
    tbl += '</table>';
    $(document).find("#infoTable").html(tbl);
} // line ends seeListingInfoTable function

【问题讨论】：

标签： javascript jquery html arrayobject

【解决方案1】：

最简单的方法是将data attributes 添加到您的HTML，例如<a href="#" data-name=" + businessName + " data-address=" + businessAddress +">，然后使用jQuery .data() method 获取。

我创建了一个显示逻辑的最小示例，因此您可以在代码中实现它。

var $person = $('.person');
var $resultName = $('.result-name');
var $resultAge = $('.result-age');

$person.on('click', function() {
  var $this = $(this);
  
  var name = $this.data('name');
  var age = $this.data('age');
  
  $resultName.html(name);
  $resultAge.html(age);
});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<ul>
  <li><a class="person" href="#" data-name="John Doe" data-age="12">One</a></li>
  <li><a class="person" href="#" data-name="Mark Z" data-age="23">Two</a></li>
</ul>

<div class="result">
  <p>Name: <span class="result-name"></span></p>
  <p>Age: <span class="result-age"></p>
</div>

【讨论】：