Html Question posted in
Some basic documentation can be found here.

Html – How to make a table of 2 columns from a list?

I have a list var words=['ac', 'bd', 'bf','uy','ca'];

I want to form a table of 2 columns listing all these words one after another from left to right.

The result table should be

<table id="wordTable">
 <tr>
   <td>ac </td>   <td>bd </td>
 </tr>
 <tr>
   <td>bf </td>   <td>uy </td>
 </tr>
 <tr>
   <td>ca </td>   <td> </td>
 </tr>

</table>

This javascript code does not work

function showWords(){
  row_Index=0;
  for (const myWord of words)
  {
    if (row_Index==0){
     document.getElementById("wordTable").innerHTML +="<tr>";      
     document.getElementById("wordTable").innerHTML += "<td>"+ myWord +"</td>";
     }
     else if (row_Index==1){
     document.getElementById("wordTable").innerHTML += "<td>"+ myWord +"</td>";

     document.getElementById("wordTable").innerHTML +="</tr>";        
     }
     else if (row_Index==2){
        row_Index=0;
     }
     row_Index++;
  }
}

How to create that table from the list?

Also, how to clear all the rows and columns of the table?

document.getElementById("wordTable").clear();

or document.getElementById("wordTable").remove();

don’t work

Tags:

3

Answers


  1. 0 
                document.addEventListener("DOMContentLoaded", function() {
                var words = ['ac', 'bd', 'bf', 'uy', 'ca'];
                var table = document.getElementById("wordTable");
                for (var i = 0; i < words.length; i += 2) {
                    var row = document.createElement("tr");
                    var cell1 = document.createElement("td");
                    var cell2 = document.createElement("td");
                    cell1.textContent = words[i];
                    cell2.textContent = (i + 1 < words.length) ? words[i + 1] : '';
                    row.appendChild(cell1);
                    row.appendChild(cell2);
                    table.appendChild(row);
                }
            });

                <div id="wordTable">
            </div>
    Login or Signup to reply.
  2. 0

    Can you please check the below solution? Hope it will work for you.

    var words = ['ac', 'bd', 'bf', 'uy', 'ca'];
var table = document.getElementById('wordTable');

// Clear the existing table content
table.innerHTML = '';

var row, cell1, cell2;
for (var i = 0; i < words.length; i += 2) {
  row = table.insertRow();
  cell1 = row.insertCell();
  cell1.textContent = words[i] || '';
  cell2 = row.insertCell();
  cell2.textContent = words[i + 1] || '';
}
    table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid;
}
    <table id="wordTable">
</table>
    Login or Signup to reply.
  3. 0

    You could do it with a combination of .reduce() and .map like this:

    var words=['ac', 'bd', 'bf','uy','ca'];


document.getElementById("wordTable").innerHTML=arr2tbl(2);

function arr2tbl(ncols){
 return words.reduce((a,c,i)=>{
 if(i%ncols==0)a.push([]);
   a.at(-1).push(c);
   return a;
  },[]).map(r=>"<tr>"+r.map(c=>`<td>${c}</td>`).join("")+"</tr>").join("n");
}
    <table id="wordTable"></table>

    The function parameter ncols can be set to any value. Here the value 2 fulfills OP’s requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search