时间戳

首页 > 解决方案 > 如何在 jQuery 的表格中添加图像

javascript - 如何在 jQuery 的表格中添加图像

问题描述

所以我试图而不是让图像的 svg 链接让图像实际显示在表格中。有人能帮我吗？

var url3 = "https://restcountries.eu/rest/v2/region/europe";
$.getJSON(url3, function (landen2, status) {
    //console.log("Data:", data);
    //console.log("Status:", status);
    laadTable(landen2);
});

function laadTable(landen2) {
    var landtable2 = $("<table>").addClass("tbl_sm");
    var tl2 = $("<tr>")
        .append($("<th>").html("name"))
        .append($("<th>").html("vlag"))
        .append($("<th>").html("neighboring countries"))
    landtable2.append(tl2);

    $(landen2).each(function (key, landen2) {
        var x = landen2.perc * 100;
        tl2 = $("<tr>")
            .append($("<td>").html(landen2.name))
            .append($("<td>").html(landen2.flag))
            .append($("<td>").html(landen2.borders))
        landtable2.append(tl2);
    });

    $("#divEind").append(landtable2);
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- jQuery CDN -->
    <div id="contentJA">
        <div id="divEind"></div>
    </div>

标签： javascripthtmljquerydatabaseapi

解决方案

要实现这一点，只需构建一个img元素并将其landen2.flag值设置为src.

另请注意，您可以通过减少更新 DOM 的次数来提高 JS 的性能。您可以通过将 HTML 创建为字符串并将它们附加一次来实现此目的，还可以使用map()构建一个新数组<tr>以在一个操作中添加，而不是在循环的每次迭代中添加。

var url3 = "https://restcountries.eu/rest/v2/region/europe";
$.getJSON(url3, function(landen2, status) {
  laadTable(landen2);
});

function laadTable(landen2) {
  let $table = $("<table>").addClass("tbl_sm");
  let $header = $("<tr><th>name</th><th>vlag</th><th>neighboring countries</th></tr>").appendTo($table);
  let rows = landen2.map(o => {
    let $row = $(`<tr><td>${o.name}</td><td><img src="${o.flag}" /></td><td><ul></ul></td></tr>`);
    let borders = o.borders.map(b => `<li>${b}</li>`);
    $row.find('ul').append(borders);
    return $row;   
  });
  $table.append(rows).appendTo('#divEind');
}
img {
  width: 75px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jQuery CDN -->
<div id="contentJA">
  <div id="divEind">
    Loading...
  </div>
</div>

推荐阅读