El objeto se crea cada vez que se hace clic en el botón Enviar, y se empuja a la matriz book_list, pero me desordeno cuando hago un bucle en la lista para crear una fila, ¿cómo puedo resolver esto? aquí está el enlace: https://jsfiddle.net/s7jmkeqL/
let book = new Book(title.value, authName.value, email.value, price.value, date.value, lang.value, radio.value); book_list.push(book); // create new rows function createTd(content) { let td = document.createElement('td'); td.appendChild(document.createTextNode(content)); tr.appendChild(td); table.appendChild(tr); } book_list.sort((a, b) => (a.date > b.date) ? 1 : -1); // sort the list by date for (let i = 0; i < book_list.length; i++) { createTd(book_list[i].date); createTd(book_list[i].authName); createTd(book_list[i].email); createTd(book_list[i].title); createTd(book_list[i].type); createTd(book_list[i].price); createTd(book_list[i].lang); }Creo que el problema es que, tan pronto como crea un <td> , lo agrega a un <tr> pero también agrega inmediatamente este <tr> a su tabla. Como resultado, su tabla se llena con <tr> que contiene solo un <td> .
También reescribí tu bucle for para evitar repetirte, y también hice que las teclas del book fueran dinámicas, en caso de que quieras agregar más más tarde (calificación, resumen, etc., por ejemplo)
let tr; function createTd(content) { let td = document.createElement('td'); td.appendChild(document.createTextNode(content)); tr.appendChild(td); } const keys = Object.keys(book_list[0]); // ["date","authName",...] for (let book of books) { tr = document.createElement('tr'); // Create a new row for each book for(let key of keys) { createTd(book[key]); // Append all the cells in the same row } table.appendChild(tr); // Add the row to the table }