What is the best way to implement a table using JavaScript?

Question

What is the best way to implement a table using JavaScript?

I am struggling to add a table to my HTML document dynamically using JavaScript.

Despite trying various methods like appendChild and insertBefore, I have not been successful.

Below is the snippet of my JavaScript code:

//JavaScript code here...

Here is the structure of my HTML:

<div class="tabs" id="tabs1">
  <!-- Table structure here... -->
</div>

// Additional HTML code for the table...

I want to insert the dynamically created table in my div with the ID "tabs1", specifically within the tbody element. However, it always appears after the tbody.

The issue seems to be that despite creating a separate div for the JavaScript content, it does not get appended inside it. My goal is to ensure the JavaScript-generated table goes into the designated div with the ID "tabs1".

javascript html css

Answer 1

Answer №1

It is not possible to include a <div> within a table body, therefore it must be placed outside along with your inserts. By modifying the code as follows:

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

to:

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

it appears to function correctly to some extent. View for reference: https://jsfiddle.net/KIKO_Software/kqr48uxj/4/

The new rows are now successfully added to the table body.

Answer 2

It is not possible to include a <div> within a table body, therefore it must be placed outside along with your inserts. By modifying the code as follows:

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

to:

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

it appears to function correctly to some extent. View for reference: https://jsfiddle.net/KIKO_Software/kqr48uxj/4/

The new rows are now successfully added to the table body.

Answer 3

Answer №2

A range of concerns...

It's not permissible to include a <div> inside a <tbody> element according to the rules of HTML, so my suggestion would be to eliminate the <div>. Additionally, keep in mind that it is possible to have multiple <tbody> tags within a single <table>, allowing you to separate them into different sections with distinct id attributes.

The method call of document.getElementById("tabs1") will retrieve a single object, not an array - hence there is no need for adding [0] at the end.

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

Lastly, your for loop goes from 0 to 99 but the data available only spans from 0 to 1 (or 0 to 7 based on the commented out data)... and since you are attempting to access utilisateur[i], if the value of i surpasses the total number of items in the array, an error message will be displayed in the developer console. Thus, make sure to check if there are adequate 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: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3344441d575c5f5c41564073545e525a5f1d505c5e">[email protected]</a>"
  },
  {
    id: 52,
    checked: true,
    prenom: "Bernard",
    date: "Robopsycologue",
    examen: "human",
    note: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9cece97dbdccbd7d8cbddf9ded4d8d0d597dad6d4">[email protected]</a>"
  }
];

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);

  
  //Repeated lines are shown above

$(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>

Answer 4

A range of concerns...

It's not permissible to include a <div> inside a <tbody> element according to the rules of HTML, so my suggestion would be to eliminate the <div>. Additionally, keep in mind that it is possible to have multiple <tbody> tags within a single <table>, allowing you to separate them into different sections with distinct id attributes.

The method call of document.getElementById("tabs1") will retrieve a single object, not an array - hence there is no need for adding [0] at the end.

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

Lastly, your for loop goes from 0 to 99 but the data available only spans from 0 to 1 (or 0 to 7 based on the commented out data)... and since you are attempting to access utilisateur[i], if the value of i surpasses the total number of items in the array, an error message will be displayed in the developer console. Thus, make sure to check if there are adequate 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: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3344441d575c5f5c41564073545e525a5f1d505c5e">[email protected]</a>"
  },
  {
    id: 52,
    checked: true,
    prenom: "Bernard",
    date: "Robopsycologue",
    examen: "human",
    note: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9cece97dbdccbd7d8cbddf9ded4d8d0d597dad6d4">[email protected]</a>"
  }
];

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);

  
  //Repeated lines are shown above

$(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>

Answer 5

Answer №3

If you're looking for a simple solution, consider utilizing ES6 string interpolation.

Let's say we have an array of objects:

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

Now, imagine we also have an HTML table object.

To append rows dynamically, you can follow this pattern:

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

Answer 6

If you're looking for a simple solution, consider utilizing ES6 string interpolation.

Let's say we have an array of objects:

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

Now, imagine we also have an HTML table object.

To append rows dynamically, you can follow this pattern:

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

What is the best way to implement a table using JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

Deleting entries from a selection of items in a list generated from an auto-fill textbox

The Bootstrap command to show the modal with the ID "myModal" is malfunctioning

Applying CSS transformations to scale up a div within its parent body

Can you tell me why the jquery datepicker control is only loading a portion of the CSS?

Modifying a variable when a specific number of elements are clicked using jQuery

Using JavaScript to develop a demonstration of the capabilities of Microsoft's Cognitive

Using HTML5 validation on a form along with a button that triggers a JavaScript function to send an email via PHP and display a modal upon

Steps for adjusting the status of an interface key to required or optional in a dynamic manner

Toggle multiple buttons based on the data fetched in the created() lifecycle hook

What could be the reason for my regex succeeding on the client side but failing on the server side

Spacing the keyboard and input field in React Native

What is the best method for ensuring that cheese rises to the top?

Determine the index of a specific character within a string using a "for of" loop

Stripe: Either a source or customer must be provided

Avoid retrieving data during the fetching process

Stopping the execution in JavaScript: Is there a way to do it?

Creating HTML email forms without needing to use Outlook

Accessing JSON data from an external file using AngularJS's $http method

Synced Slideshows

Surprising Vercel Production Problem: Functions in Development Environment but Fails in Production Even After Reverting to a Functional Commit