JavaScript получает данные из объекта массива и помещает их в таблицу HTML - PullRequest
Новая
       20

JavaScript получает данные из объекта массива и помещает их в таблицу HTML

0 голосов
/ 04 октября 2018

У меня есть объект, в котором хранятся данные.У меня есть, где пользователи могут выбрать опцию, после чего появится список результатов.Результаты являются ссылками.После нажатия на ссылку я хотел бы, чтобы данные о компании отображались в виде таблицы.Единственное, что я не знаю, как это сделать, когда после нажатия на ссылку 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

1 Ответ

0 голосов
/ 04 октября 2018

Самый простой способ - добавить атрибуты данных в ваш HTML, например, <a href="#" data-name=" + businessName + " data-address=" + businessAddress +">, а затем получить их с помощью метода jQuery .data () .

* 1007.* Я создал минимальный пример, показывающий логику, чтобы вы могли реализовать ее в своем коде. 

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