Create a table and fill it with data through 2 nested loops in JS

Question

I found many similar questions but not my case.

function getRes(){

    var str = "";

    for(lat=1; lat<=2; lat++){

        for(lon=1; lon<=2; lon++){

       str += "Track "+lat+" "+lon+"<br>";

        }

    }
        return document.write(str);
}

I would to generate a table in html page with javascript then print the result of that function (above) inside it instead to write it simply to the html page, and better if it were with header.

With large numbers of data would take hours to do :( Something would be like this.

<table border="1">
     <th>type</th>
     <th>latitude</th>
     <th>longitude</th>

 <tr>
 <td>Track</td>
 <td>1</td>
 <td>1</td>
 </td>

 <tr>
 <td>Track</td>
 <td>1</td>
 <td>2</td>
 </td>


 <tr>
 <td>Track</td>
 <td>2</td>
 <td>1</td>
 </td>

 <tr>
 <td>Track</td>
 <td>2</td>
 <td>2</td>
 </td>

<table>

Any help, thanks in advance!

Answer 1

here is a very simple demo of how create a table and fill it with td values:

function getRes(){
        var cont = document.getElementById('demo');
    var table = document.createElement("TABLE")
    var tr = null, td = null;
    tr = document.createElement("TR")
    td =document.createElement("th");
    td.innerHTML = 'type';
    tr.appendChild(td);
   var td1 =  document.createElement("th")

  td1.innerHTML = 'latitude';
  tr.appendChild(td1);
  var td2 =  document.createElement("th")

  td2.innerHTML = 'longitude';
  tr.appendChild(td2);
    table.appendChild(tr);

    for(lat=1; lat<=2; lat++){

        for(lon=1; lon<=2; lon++){
                tr = document.createElement("TR")
       //str = "Track "+lat+" "+lon+"<br>";
                var td2 =document.createElement("td");
        td2.innerHTML = 'Track';

        var td3 =document.createElement("td");
        td3.innerHTML = lat;
        var td4 =document.createElement("td");
        td4.innerHTML = lon;
         tr.appendChild(td2)
        tr.appendChild(td3)
        tr.appendChild(td4)
                table.appendChild(tr);
        }

    }
     cont.appendChild(table); 
}
getRes()