如何使用 jQuery 显示来自 JSON 数据的图像？

Question

我想将 JSON 数据中的图像显示到第一行第一列。 我可以使用什么来获取此列之前的图像（数据 [key] .description）

$(document).ready(function() {
  if ( $('#main_intranet-main').length ) {
  $.getJSON("http://172.17.45.137:8080/cgi-bin/koha/svc/report?id=396&annotated=1", function(data) {
    if ( data.length ) {
      $('#news8').prepend('<div class="newsitem" id="mystats"><table class="table table-striped" style="width: 100%; background: none"><thead><th colspan="3" style="text-align: center; font-weight: bold; padding: 8px; line-height: 1.42857143; vertical-align: middle; text-transform: uppercase;">Statistics</thead><tbody><tr id="mystatstb"><td><strong>Branch</strong></td><td><strong>Unique Titles</strong></td><td><strong>Total Copies</strong></td></tr></tbody></table></div>');
      for ( var key in data ) {
        $('<tr id=\"tr'+ key + '"><td class="text-center">' + data[key].description + '</td><td class="text-center">' + data[key].bibs + '</td><td class="text-center">' + data[key].items + '</td></tr>').insertAfter( $( '#mystatstb' ) );
      }
    }
  });
  }
});

JSON数据的输出

[{"items":54576,"description":"Books","imageurl":"bridge/book.png","bibs":48760},{"imageurl":"bridge/periodical.png","items":4386,"description":"Continuing Resources, Back volumes of print journals","bibs":90},{"bibs":85,"imageurl":"","items":87,"description":"Kindle E-books"},{"bibs":777,"description":"Multimedia Resources","items":848,"imageurl":"liblime-kids/music-CD.gif"},{"bibs":38,"imageurl":"bridge/e_book.png","items":38,"description":"Open Access E-books "},{"items":1685,"description":"Perpetual/Purchased E-books","imageurl":"bridge/e_book.png","bibs":1677},{"imageurl":"npl/Reference.gif","description":"Reference","items":3265,"bibs":1622},{"imageurl":"vokal/NEWBK-32px.png","items":28,"description":"Reports of Government and inter-governmental organizations","bibs":28},{"items":1866,"description":"Short Loan Item","imageurl":"","bibs":1158},{"description":"Subscribed E-books","items":3,"imageurl":"bridge/e_book.png","bibs":3}]

Answer 1

根据您的table > tbody > tr ，它有 3 列（ td表示分支、唯一标题、总副本），如果您想在description前“添加”照片（第 1 列），您的 for 循环也有 3 td那么你新生成的行将有 4 列，但标题只有 3 列，这是你想要的吗？

由于您的原始代码是使用<tr>插入的，所以我假设您要在table > tbody ，在<tr id="mystatstb">...</tr>行下方：

$('#mystatstb').append('<tr id=\"tr' + key + '"><td><imd src="'+data[key]["imageurl"]+'"></td><td class="text-center">' + data[key].description + '</td><td class="text-center">' + data[key].bibs + '</td><td class="text-center">' + data[key].items + '</td></tr>')

这有 4 列，删除不需要的列或在mystatstb行上添加新列以完善表格。