javascript - 用 javascript 和 html 建立一个表

Question

我想创建一个包含来自外部来源的信息的表格。我在互联网上找到了一个解决方案，但我想更改表格的视图。我现在可以建立这个表：

使用此代码：

function showInfo(evt) {
    var f = 0;
    var temstr = "";
    if(evt.features.length != 0){
        for (f = 0; f <= evt.features.length - 1; f++) {
            if(evt.features[f].gml.featureType == "amice_om_herk"){
                temstr = temstr + "<b>" + "<center>Herkomstlocatie</center>" + "</b>";
                temstr = temstr + "<table>";
                for ( var key in evt.features[f].attributes) {
                    temstr += "<tr>";
                    switch (key){
                    case 'afvlstrnum':
                        temstr += "<td width= 71px>Afvalstroomnummer</td><td>"
                        + evt.features[f].attributes[key] + "</td>";
                        break;
                    case 'strnm_herk':
                        temstr += "<td width= 71px>Straat</td><td>"
                        + evt.features[f].attributes[key] + "</td>";
                        break;
                    case 'hsnum_herk':
                        temstr += "<td width= 71px>Huisnummer</td><td>"
                        + evt.features[f].attributes[key] + "</td>";
                        break;
                    case 'numtv_herk':
                        temstr += "<td width= 71px>Nummer toevoeging</td><td>"
                        + evt.features[f].attributes[key] + "</td>";
                        break;
                    case 'plts_herk':
                        temstr += "<td width= 71px>Plaatsnaam</td><td>"
                        + evt.features[f].attributes[key] + "</td>";
                        break;

                    default:
                    };
                    temstr += "</tr>";
                }
                temstr = temstr + "</table>";
            };

        }
        log(temstr, true);
    } else {
        log("<b>Informatie</b><br/>" + "Niets gevonden op deze locatie", true);
    }
}

但我希望我的桌子看起来更像这样：

换句话说，翻转我的表，列名在值上方，而不是在值的行中。也可能是一个问题，如果我单击某个有多个值相互叠加的地方，我希望这些值在彼此之下，但保留一个列名（如上图），而不是这样：

有人可以帮我解决这个问题吗？我不是经验丰富的编码员。

Answer 1

这对于 Stackoverflow 来说并不是最好的问题（因此投反对票），但我可以为您指出正确的方向。

基本上，您需要启动 table <table>，然后使用标签创建一行<tr>并在其中创建表标题<th>。

一旦你有了你的标题，然后使用for上面的循环用数据填充表格。

此外，您可以参考此处查看水平和垂直标题的示例。

Answer 2

好的，我不想为您完成整个编码，这就是为什么我编写类似 api 的东西来帮助您：

function grid(columnNames){
this.rows=[];
this.columnNames=columnNames;
this.addRow=function(row){
//add to the rows array
this.rows.push(row);
}
this.render=function(){
html="<table><tr>";
//loop trough the headings first
 this.columnNames.forEach(function(column){
html+="<th>"+column+"</th>";
});
html+="</tr>";
//loop trough the rows
this.rows.forEach(function(row){
html+="<tr>";
//loop trough columns
row.forEach(function(col){
html+="<td>"+col+"</td>";
});
html+="</tr>";

});
html+="</table>";
return html;
};
}

像这样使用：

newgrid=new grid(["column a","column b"]);
newgrid.addRow(["value a1","value b1"]);
newgrid.addRow(["value a2", "value b2"]);
document.all.body.innerHTML=newgrid.render();