javacriptを使用してテーブル内のイメージとそのテキストコンテンツを返す方法

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

オブジェクトを含む配列を1つだけ使用してください。各オブジェクトは、そのすべてのプロパティをブックで表します。

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>