JavaScript從數組對象獲取數據並放入html表

Question

我有一個存儲有數據的對象。 我有它，用戶可以選擇一個選項，然后出現結果列表。 結果是鏈接。 單擊鏈接后，我希望有關公司的數據顯示為表格。 唯一的事情是，我不知道如何在單擊鏈接時將其放置在何處，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

Answer 1

最簡單的方法是將數據屬性添加到HTML，例如<a href="#" data-name=" + businessName + " data-address=" + businessAddress +"> ，然后使用jQuery .data（ ）方法 。

我創建了一個顯示邏輯的最小示例，因此您可以在代碼中實現它。

 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>