javascript - 如何使用JavaScript在表格中返回图像数组及其文本内容

我真的是Java语言的新手，我需要有关如何使用Javascript表显示书籍封面缩略图及其标题和价格的帮助。这是我到目前为止所拥有的。

var bookImages = new Array ('images/animals-116x150.jpg', 'images/dog-loves-counting-125x150.jpg', ...);

var bookTitle = new Array ('Animals And Their Families', 'Dog Loves Counting', ...);

var bookDescr = new Array ('...','....');

var authors = new Array ('By Barbara Nascimbeni', 'By Louise Yates', ...);

var coverPrice = new Array ('Hardcover, <b>Price: $5.99 CDN</b></style>; 'Hardcover, <b>Price: $5.99 CDN</b>', ...);

var books = document.getElementById("bookSales");

var a;

var bookContent = '<table>';  *this  part contains open table tag, just not showing for some reason*

for (a = 0; a < bookImages.length; a++) {

    bookContent += "<tr><td><img src='" + bookImages[a] + "</td>";
    bookContent += "<td>" + "<b>" + bookTitle[a] + "</b>" + "<br>" + bookDescr[a] + "<br>" + authors[a] + "<br>" + coverPrice[a] +
    "<br><br><br><br><br><br><br><br>" + "</td></tr>";
}

bookContent += "</table>"; *this contains end table tag*

books.innerHTML = bookContent;

最佳答案

您应该只使用一个包含对象的数组。每个对象将代表一本书及其所有属性。然后，您可以在迭代数组时简单地调用book.description以获得一本书的描述

let books = [{
  image: 'image/A.png',
  title: 'Mysterious Book',
  description: 'foo..faa.',
  authors: ['John McFee', 'Jack McGordon'],
  coverPrice: 5.99
}, {
  image: 'image/B.png',
  title: 'What a Book',
  description: 'descriptio is life',
  authors: ['Gipsy Guy'],
  coverPrice: 10.95
}];
let bookSales = document.getElementById('bookSales');
let list = "";
books.forEach(book => {
  list += "<tr>";
  list += "<td><img src='" + book.image + "'></td>";
  list += "<td>" + "<b>" + book.title + "</b>" + "<br>" + book.description + "<br>" +     book.authors.join(',') + "<br>" + book.coverPrice + "</td>";
  list += "</tr>";

});
bookSales.innerHTML += list;

table,
th,
td {
  border: 1px solid black;
}

<table>
  <tbody id="bookSales">
  </tbody>
</table>