如何使用javascript返回表格中的圖像及其文本內容的數組

Question

我真的很新用Javascript，並且我需要關於如何使用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; 

Answer 1

您應該只使用一個包含對象的數組。每個對象將代表一本書的所有屬性。然後，您可以簡單地調用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>