将返回的api数据追加到表中

nwlqm0z1  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(431)

我试图从公共假日api中返回一些信息,并将其显示在传单Map上、table内、弹出窗口中。
弹出窗口正在工作,数据在控制台中正确显示,但在弹出窗口本身中没有。我的代码没有预期的效果,无法向表中添加新行,其中包含每个公共假日的日期和名称(此信息根据Map显示的国家而变化)。
有什么建议/我遗漏了什么吗?
与此相关的章节:

  1. success: function(result) {
  2. console.log(result);
  3. if (result.status.name == "ok") {
  4. var countryHolidays = [];
  5. $.each(result.data, function(index, value){
  6. if (value.location){
  7. var newLocation = value.location.join();
  8. countryHolidays.push({ name: value.country, date: value.date, location: newLocation});
  9. } else {
  10. countryHolidays.push({ name: value.country, date: value.date, location: "Nationwide"});
  11. }
  12. });
  13. var info =
  14. `
  15. <div id="holidays-div" class="bg-success mx-0 my-0 px-1 py-1">
  16. <table id="holidays-table" class="table table-striped table-responsive border-0 rounded-12px mx-0 my-0 px-0 py-0">
  17. <thead class="bg-success text-white">
  18. <th colspan="2">Public Holidays</th>
  19. </thead>
  20. <tbody>
  21. <tr><td>Name</td><td>Date</td></tr>
  22. </tbody>
  23. </table>
  24. </div>
  25. `
  26. countryHolidays.forEach((element) => {
  27. $('#holidays-table tr:last').append("<tr><td>" + element.name + "</td><td>" + element.date + "</td></tr>");
  28. });
  29. holidayMarker.addLayer(L.marker([$('#lat').text(), $('#lng').text()], {icon: holidayicon}).bindPopup(info));
  30. };
  31. mymap.addLayer(holidayMarker);
  32. }, ...
xienkqul

xienkqul1#

好吧,您正在引用一个甚至还没有生成的元素。试着先摆好table。
$(“#假日表tr:last”).append(“+element.name+”“+element.date+”);
在上面的部分中,我们说您希望向holidays表中追加一些内容,但同时该表甚至不存在(您将元素存储在名为info的变量中)。所以首先,在dom中添加这个(比如将它附加到主体中),然后使用它进行操作。这里有一个例子

  1. $("body").append(info)
  2. $('#holidays-table tr:last').append(...

在这之后,您可以附加任何您想要的内容(比如循环中的内容)。我希望我能帮忙!

相关问题