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

Question

I am really new with Javascript and I need help on how to display an array of book cover thumbnails with their titles and prices using a table in Javascript. This is what I have so far.

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;

Answer 1

You should use only one array that will contain object. Each object will represent a book an all its properties. You can then simply call book.description to get the description of a book while iterating your array

 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>