创建一个表,并通过JS中的2个嵌套循环用数据填充它

时间:2017-11-21 20:47:20

标签: javascript for-loop html-table create-table

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

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生成一个表,然后在其中打印该函数的结果(上面),而不是简单地将它写入html页面,如果它是带标题的话会更好。

大量数据需要数小时才能完成:( 有点像这样。

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

任何帮助,提前谢谢!

1 个答案:

答案 0 :(得分:0)

这是一个非常简单的demo如何创建表并用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()