Geek Answers Handbook

How to insert rows and columns of a table with 2d array

SO I have 2 arrays that var num = ["1", "2", "3"]; var cars = ["Saab", "Volvo", "BMW"],
and I made a button where it will add rows and columns and put the values ​​of my 2 arrays into a table. However, I don't know how to turn 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 arrays and display them in a table, for example, (t [0] [0] will be 1 saab)

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

0
source share
2 answers

HTML. , , . ,

var myCars = [{Pos: 1, Make: "Saab"}, {Pos: 2, Make: "Volvo"}, {Pos: 2, Make: "BMW"}],

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);
Hide result

. . , tableMaker false. , - 2D- . ;

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);
Hide result
0

, .

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>
Hide result
0

More articles:


All Articles