How Adding A Table With Js?

I want add a table on my html table via JavaScript. I've already tried using the appendChild and insertBefore methods, but those didn't work. Here is my JavaScript: var utilisateur

Solution 1:

You can use a simple solution, using ES6 string interpolation

For example we have an array of objects

employees: [
 {
    name: 'John Doe',
    phone: '00000000',
 },
 {
   name: 'George Daniels',
   phone: '11111111',
 }
]

and a table html object.

you can append rows like this:

for (let employee of employees) {
    let row = document.createElement("tr");
    row.innerHTML = `<td>${employee.name}</td>
                     <td>${employee.phone}</td>`;
    table.appendChild(row);
   }

Solution 2:

You cannot add a <div> inside a table body, so it is placed outside it, and so are your inserts. If you change this code:

var element = document.getElementById("tabs1")[0];
element.appendChild(row);

to this:

var element = document.getElementById("tbody");
element.appendChild(row);

it seems to work, somewhat. See: https://jsfiddle.net/KIKO_Software/kqr48uxj/4/

New rows are now added to the table body.

Solution 3:

A number of issues...

You can't have a <div> as the child of a <tbody> because that is invalid HTML... so I would suggest you remove the <div> (also remember you can have multiple <tbody> tags within a <table> meaning you can split them up into section with separate id attributes, etc).

The function call of document.getElementById("tabs1") will return a single object, not an array - so you don't need the [0] at the end...

var element = document.getElementById("tabs1");

And lastly, you're going from 0 to 99 in your for loop, but the data you've provided only goes from 0 to 1 (or 0 to 7 with the commented out data)... however, you're trying to access utilisateur[i] and if the value of i is more than the number of items of data in the array, you will get an error in your developer console. So you need to check that there are enough items in utilisateur.length...

if (i < utilisateur.length) {
  cell0.innerText = utilisateur[i].id;
  cell1.innerText = utilisateur[i].checked
  ...
}

var utilisateur = [
  {
    id: 51,
    checked: false,
    prenom: "Dolores",
    date: "Fermière",
    examen: "host",
    note: "ww.dolores@gmail.com"
  },
  {
    id: 52,
    checked: true,
    prenom: "Bernard",
    date: "Robopsycologue",
    examen: "human",
    note: "ww.bernard@gmail.com"
  }
];

for (let i = 0; i < 100; i++) {
  var row = document.createElement("tr");
  var cell0 = document.createElement("td");
  var cell1 = document.createElement("td");

  var atr = document.createAttribute("class");
  atr.value = "bs-checkbox";
  cell1.setAttributeNode(atr);
  var para = document.createElement("input");
  var para1 = document.createAttribute("data-index");
  var para2 = document.createAttribute("name");
  var para3 = document.createAttribute("type");
  para1.value = "0";
  para2.value = "btSelectItem";
  para3.value = "checkbox";
  para.setAttributeNode(para1);
  para.setAttributeNode(para2);
  para.setAttributeNode(para3)
  cell1.appendChild(para);



  // var cell1 = '<td class="bs-checkbox"></td>'
  //alert(cell1).innerText;
  var cell2 = document.createElement("td");
  var cell3 = document.createElement("td");
  var cell4 = document.createElement("td");
  var cell5 = document.createElement("td");
  var cell6 = document.createElement("td");
  var cell7 = document.createElement("td");
  var cell8 = document.createElement("td");
  if (i < utilisateur.length) {
    cell0.innerText = utilisateur[i].id;
    cell1.innerText = utilisateur[i].checked
    cell2.innerText = utilisateur[i].prenom;   
    cell3.innerText = utilisateur[i].date;
    cell4.innerText = utilisateur[i].examen;
    cell5.innerText = utilisateur[i].note;
  }
  row.appendChild(cell0);
  row.appendChild(cell1);
  row.appendChild(cell2);
  row.appendChild(cell3);
  row.appendChild(cell4);
  row.appendChild(cell5);
  // row.appendChild(cell6);
  // row.appendChild(cell7);
  // row.appendChild(cell8);

  // document.getElementsById("tbody")[0].appendChild(row);

  // var elem = document.getElementsById("tabs1");
  // var mychild = document.getElementById("")
  // elem.insertBefore(mypara, mychild);
  // elem.appendChild(row);
  var element = document.getElementById("tbody");
  element.appendChild(row);
}

$(document).ready(function(){
    $(cell1).toggleClass("bs-checkbox");
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table"
            data-toggle="table"
            data-search="true"
            data-filter-control="true" 
            data-show-export="true"
            data-click-to-select="true"
            data-toolbar="#toolbar">
  <thead>
     <tr>
        <th id="0" style="visibility: hidden; display: none;"></th>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="prenom" data-filter-control="input" data-sortable="true">Prénom</th>
        <th data-field="date" data-filter-control="select" data-sortable="true">Date</th>
        <th data-field="examen" data-filter-control="select" data-sortable="true">Examen</th>
        <th data-field="note" data-sortable="true">Note</th>
     </tr>
  </thead>
  <tbody id="tbody">
     <tr>
        <td id="1" style="visibility: hidden; display: none;"></td>
        <td class="bs-checkbox ">      <input data-index="0" name="btSelectItem" type="checkbox">      </td>
        <td>Valérie</td>
        <td>01/09/2015</td>
        <td>Français</td>
        <td>12/20</td>
     </tr>
  </tbody>
</table>