Javascript Question posted in
A very good W3school tutorial can be found here.

How can I fill a variable length HTML table from JavaScript

I need to fill in an HTML table from JS (I have just started with JS). Here is my code based on an example I found:

length = Table.length
const Table = document.getElementById("TblBody")
for ( i = 0; i<length; i++ )
{ let row = Table.insertRow();
  let cell0 = row.insertCell(0);
  let cell1 = row.insertCell(1);
  let cell3 = row.insertCell(3);
  let cell4 = row.insertCell(4);
  cell0.innerHTML = NameTable[i][0];
  cell1.innerHTML = NameTable[i][1];
  cell3.innerHTML = NameTable[i][2];
  cell4.innerHTML = NameTable[i][3];
}
<table id="myTable" border="1" style="display:none; width:500px; float: left">
  <thead>
     <tr>
        <th>Name</th>
        <th>Address</th>
        <th>....</th>
        <th>Phone</th>
        <th>Nick Name</th>
     </tr>
  </thead>
  <tbody id="TblBody"></tbody>
</table>

I expected to see about 20 rows of five columns each filled with data.
The results I got with the above code:
the headers displayed as expected
boxes for the first two columns were displayed
neither box had any data

Tags:

2

Answers


  1. 0

    You are trying to use the Table variable before it is defined. You should declare the const Table before using it.

    const people = [
  ["John Doe", "123 Main St", '', "555-1234", "Johnny"],
  ["Jane Smith", "456 Elm St", '', "555-5678", "Janey"],
  ["Alice Johnson", "789 Oak St", '', "555-9876", "Ali"],
];

const tableBody = document.getElementById("TblBody");

const length = people.length;

for (let i = 0; i < length; i++) {
    let row = tableBody.insertRow();

    let cell0 = row.insertCell(0);
    let cell1 = row.insertCell(1);
    let cell2 = row.insertCell(2);
    let cell3 = row.insertCell(3);
    let cell4 = row.insertCell(4);

    cell0.innerHTML = people[i][0];
    cell1.innerHTML = people[i][1];
    cell2.innerHTML = people[i][2];
    cell3.innerHTML = people[i][3];
    cell4.innerHTML = people[i][4];
}

document.getElementById("myTable").style.display = "block";

    I haven’t tested this code; it would be best if you could show the array with some example data.

    Login or Signup to reply.
  2. 0

    do Simply :

    const myTblBody = document.querySelector('#myTable > tbody');

for ( let [ Name, Address, Phone, NickName ] of NameTable )
  {
  let row = myTblBody.insertRow();
  row.insertCell().textContent = Name;
  row.insertCell().textContent = Address;
  row.insertCell(); 
  row.insertCell().textContent = Phone;
  row.insertCell().textContent = NickName;
  }
    table {
  background      : darkblue;
  border-collapse : separate;
  border-spacing  : 1px;
  margin-bottom   : .8em;
  }
table caption {
  font-size   : 1.4rem;
  font-weight : bold;
  padding     : .4em 0;
  }
th {
  background-color : #7fccff;
  padding          : .4em .6em ;
  }
td {
  background-color : whitesmoke;
  padding          : .2em .7em;
  text-align       : center;
  }
    <table id="myTable">
  <thead>
     <tr>
        <th>Name</th>
        <th>Address</th>
        <th>....</th>
        <th>Phone</th>
        <th>Nick Name</th>
     </tr>
  </thead>
  <tbody></tbody>
</table>

<script>
const NameTable =
  [ [ 'John Doe', '123 Main St', '555-1234', 'Johnny'] 
  , [ 'Jane Smith', '456 Elm St', '555-5678', 'Janey'] 
  , [ 'Alice Johnson', '789 Oak St', '555-9876', 'Ali']
  , [ 'Larry Cicchinelli', '727 5th Avenue', '755-8000', 'Tiff'] 
  ];
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search