How to insert table rows and columns with 2d array

Question

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 2 arrays in the table. HoweverIdon't know how to make it into a 2d array and display it on my table.

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var table = document.getElementById("myTable");
    var row;
    var t = [][];
    var num = ["1", "2", "3"];
    var cars = ["Saab", "Volvo", "BMW"];
    for (i = 0; i < num.length;i++){
        var row = table.insertRow(i);
        for (x = 0; x < cars[i].length;x++){
            var cell1 = row.insertCell(x);

after this part i don't know what to do and it doesn't work. How can I combine the arrays and make it display it in the table for eg(t[0][0] would be 1 saab)

*cars[i] = num[x];
 cell1.innerHTML = cars[i][x];*
       }
   }
}

Could you tell us the final HTML table that you want?

SaidbakR
– SaidbakR

2016-06-05 15:23:07 +00:00
Commented Jun 5, 2016 at 15:23 — SaidbakR
– SaidbakR, Commented Jun 5, 2016 at 15:23

Redu · Accepted Answer · 2016-06-05 21:03:41Z

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

var tableMaker = (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 generated
document.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;

var tableMaker = (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 generated
            
document.write(table);

mitr00 · Accepted Answer · 2016-06-05 16:19:44Z

0

This is a simple solution using your approach.

function myFunction() {

  var num = ["1", "2", "3"];
  var cars = ["Saab", "Volvo", "BMW"];
  var table = document.getElementById("myTable");
  var rows = new Array(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]));
  }

}

<button onclick="myFunction()">Try it</button>

<table id='myTable'></table>

edited Jun 5, 2016 at 16:19

answered Jun 5, 2016 at 16:12

mitr00

286 bronze badges

Collectives™ on Stack Overflow

How to insert table rows and columns with 2d array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related