创建一个 table 并通过 JS 中的 2 个嵌套循环向其填充数据

Question

我发现了很多类似的问题，但不是我的情况。

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);
}

我想在 html 页面中使用 javascript 生成一个 table，然后在其中打印该函数（上方）的结果，而不是将其简单地写入 html 页面，如果它带有 header.

就更好了

处理大量数据需要几个小时:( 事情会是这样的。

<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>

任何帮助，提前致谢！

Answer 1

这里是一个非常简单的 demo 如何创建 table 并用 td 值填充它：

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()

创建一个 table 并通过 JS 中的 2 个嵌套循环向其填充数据

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

javascript

for-loop

html-table

create-table