How To Insert Table Rows And Columns With 2d Array

SO I have 2 arrays which are var num = ['1', '2', '3']; var cars = ['Saab', 'Volvo', 'BMW']; and I made a button where it'll add rows and column and place the values of my

Solution 1:

For a while now i use the below generic code to generate table HTML. It will take an array of objects and object properties will become table header and values will become cells. So if your data was in the form

var myCars = [{Pos: 1, Make: "Saab"}, {Pos: 2, Make: "Volvo"}, {Pos: 2, Make: "BMW"}] then we would get a table like

vartableMaker = (o,h) => {var keys = Object.keys(o[0]),
                           rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                                           : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
                           rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []);
                           return"<table>" + rows + "</table>";
                           };
        myCars = [{Pos: 1, Make: "Saab"}, {Pos: 2, Make: "Volvo"}, {Pos: 2, Make: "BMW"}] ,
         table = tableMaker(myCars,true); // if second argument provided as truthy then headers generateddocument.write(table);

However we don't have a similar data at hand. So lets make it. We don't need a header so just pass tableMaker function it's second parameter as false. Then the only thing left to us is to generate the data in the form of a 2D array as the first argument. Let's do it;

vartableMaker = (o,h) => {var keys = Object.keys(o[0]),
                           rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                                           : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
                           rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []);
                           return"<table>" + rows + "</table>";
                           },
           num = ["1", "2", "3"],
          cars = ["Saab", "Volvo", "BMW"],
         tdata = num.map((e,i) => [e,cars[i]]); // this is your 2D array.
         table = tableMaker(tdata,false), // if second argument provided as truthy then headers are generateddocument.write(table);

Solution 2:

This is a simple solution using your approach.

functionmyFunction() {

  var num = ["1", "2", "3"];
  var cars = ["Saab", "Volvo", "BMW"];
  var table = document.getElementById("myTable");
  var rows = newArray(cars.length);
  var numCell, carCell;

  for (var i = 0; i < cars.length; i++) {
    rows[i] = table.insertRow(i);
    numCell = rows[i].insertCell(0);
    carCell = rows[i].insertCell(1);
    numCell.appendChild(document.createTextNode(num[i]));
    carCell.appendChild(document.createTextNode(cars[i]));
  }

}

<buttononclick="myFunction()">Try it</button><tableid='myTable'></table>