Как редактировать HTML внутри таблицы, используя JavaScript

Question

Когда я пытаюсь добавить кнопку в HTML-таблицу, таблица не появляется.На последнем элементе "ligne" td class=ach.

function afficherCatalogue(livres){ 
    var ligne;
    for(var i in livres) {  
        ligne = '<tr>';
        ligne += '<td class=ref>' + Object.keys(livres[i])[0] + '</td>'; 
        ligne += '<td class=aut>' + livres[i].auteur + '</td>';  
        ligne += '<td class=tit>' + livres[i].titre + '</td>'; 
        ligne += '<td class=prx>' + livres[i].prix + '</td>';  
        ligne += '<td class=ach>' + <button type="button"></button> + '</td>';
        ligne += '</tr>';

        document.getElementById('tbc').innerHTML += ligne;
    }

<tbody id=tbc><!-- table to fill --></tbody>

Мне нужно добавить простую кнопку.

Answer 1

Предполагая, что livres ссылается на массив объектов, вам необходимо удалить tbody из таблицы и создать элемент tbody с помощью JavaScript с помощью метода createElement().

После создания элемента,Вы можете использовать цикл for для извлечения необходимых данных из каждого объекта в массиве и присвоения их переменной ligne.

После циклического перемещения по объектам вы можете заполнить элемент tbody, который вы только чтосоздан с использованием извлеченных данных из переменной ligne с использованием свойства innerHTML () , а затем добавьте элемент tbody в таблицу с помощью метода appendChild () , например:

/* JavaScript */
var table = document.getElementById("table");

function afficherCatalogue(livres){
  var ligne = "";  
  var tbody = document.createElement('tbody');
  
  tbody.setAttribute("id", "tbc");
  
  for(i = 0; i < livres.length; i++) {  
    ligne = '<tr>';
    ligne += '<td class=ref>' + Object.keys(livres[i])[0] + '</td>'; 
    ligne += '<td class=aut>' + livres[i].auteur + '</td>';  
    ligne += '<td class=tit>' + livres[i].titre + '</td>'; 
    ligne += '<td class=prx>' + livres[i].prix + '</td>';
    ligne += '<td class=ach>' + '<button type="button">Button ' + i + '</button>' + '</td>';
    ligne += '</tr>';

    tbody.innerHTML += ligne;

    table.appendChild(tbody);
  }
}

var data = [{First: "first", auteur: 100, titre: 200, prix: 300}, {Second: "second", auteur: 150, titre: 250, prix: 350}, {Third: "third", auteur: 200, titre: 300, prix: 400}]

afficherCatalogue(data);

/* CSS */
table {
  text-align: center;
}
thead td {
  font-weight: 700;
}
td {
  padding: 10px 10px;
}

<!-- HTML -->
<table id="table">
  <thead>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </thead>
</table>