代码之家 › 专栏 › 技术社区 › Khaled

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

create-table html-table for-loop javascript

Khaled · 技术社区 · 7 年前

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

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

我想用javascript在html页面中生成一个表,然后在其中打印该函数(上面)的结果,而不是简单地将其写入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 回复 | 直到 7 年前

Álvaro Touzón 7 年前

这里有一个非常简单的 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()

推荐文章

smg_08 · 使用for循环在pandas数据帧中进行筛选[重复]

1 年前

Sher Meen · 我需要列出一个循环中临时变量中存储的多个值

2 年前

John · 如何确定Javascript自引用循环是否完成[重复]

2 年前

George carrick · 如何在R中检测时间序列数据中的缺失年份?

2 年前

Owen · 从列表中删除非重复项(python)[重复]

2 年前

user4567794374545 · 如何将函数应用于R中的多个列?

2 年前

Alireza Pirmahdi · 我的代码多次执行打印语句,我只想执行一次

2 年前

Rik Bloemers · for循环不接受任何浮点变量

2 年前

Robbie McM · 如何使列表中的所有数据帧具有相同的列数?

2 年前

Vedant · 如何解决python啦啦队长问题?[已关闭]

2 年前