Creating a table with multiple rows and column

Question

I want to create a table with 4 rows with 3 columns, I am doing this way but with this code I am not getting anything. What I am doing wrong here?

let cell = ["a","b","c","x"];
let cell1 = ["d","e","f","y"];
let cell2 = ["g","h","i","z"];

function myFunction() {
  var x = document.createElement("TABLE");
  x.setAttribute("id", "myTable");
  document.body.appendChild(x);
for(let i=0; i< 3; i++){
  var y = document.createElement("TR");
  y.setAttribute("id", myTr[i])
  document.getElementById("myTable").appendChild(y);
  var z = document.createElement("TD");
  var t = document.createTextNode(cell[i]);
  var z1 = document.createElement("TD");
  var s = document.createTextNode(cell1[i]);
  var z2 = document.createElement("TD");
  var r = document.createTextNode(cell2[i]);
  z.appendChild(t);
  z1.appendChild(s);
  z2.appendChild(r);
  document.getElementById(myTr[i]).appendChild(z);
  document.getElementById(myTr[i]).appendChild(z1)
  document.getElementById(myTr[i]).appendChild(z2)
}
}

<button onclick="myFunction()">Create</button>

Uncaught ReferenceError: myTr is not defined

Kashif
– Kashif

2021-05-25 11:42:12 +00:00
Commented May 25, 2021 at 11:42 — Kashif
– Kashif, Commented May 25, 2021 at 11:42

Carsten Massmann · Accepted Answer · 2021-05-25 12:53:49Z

After defining myTr it seems to work. And - like Carsten Løvbo Andersen already mentioned - your for loop needs to run through all elements of the given cells. I replaced your 3 with cell1.length.

let cell = ["a","b","c","x"];
let cell1 = ["d","e","f","y"];
let cell2 = ["g","h","i","z"];
const myTr=["a","b","c","d"];

function cmFunction(arr){
  const transp=arr[0].map(a=>Array());
  arr.forEach((ar,i)=>ar.forEach((a,j)=>transp[j][i]=a))
  document.body.innerHTML+='<table class="myTable"><tbody>'
   +transp.map((r,i)=>'<tr class="'+myTr[i]+'"><td>'+r.join("</td><td>")+"</td></tr>").join("\n") 
   +'</tbody></table>';
}
function myFunction() {
  var x = document.createElement("TABLE");
  x.setAttribute("id", "myTable");
  document.body.appendChild(x);
for(let i=0; i< cell1.length; i++){
  var y = document.createElement("TR");
  y.setAttribute("id", myTr[i])
  document.getElementById("myTable").appendChild(y);
  var z = document.createElement("TD");
  var t = document.createTextNode(cell[i]);
  var z1 = document.createElement("TD");
  var s = document.createTextNode(cell1[i]);
  var z2 = document.createElement("TD");
  var r = document.createTextNode(cell2[i]);
  z.appendChild(t);
  z1.appendChild(s);
  z2.appendChild(r);
  document.getElementById(myTr[i]).appendChild(z);
  document.getElementById(myTr[i]).appendChild(z1)
  document.getElementById(myTr[i]).appendChild(z2)
}
}

<button onclick="myFunction()">Create</button>
<button onclick="cmFunction([cell,cell1,cell2])">CreateNew</button>

I edited the script in order to show you that the whole thing can be done in a much simpler way. In my version cmFunction() I replaced the id attributes by class ones as this will allow for repetitions (if the "create" is clicked repeatedly).

Collectives™ on Stack Overflow

Creating a table with multiple rows and column

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related