build a table in javascript and html

Question

I want to create a table filled with information from an external source. I found a solution on the internet, but I want to change the view of the table. I can now build this table:

with this code:

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

But I want my table to look more like this:

In other words, flip my table with column names above the values instead of in the row of the value. What also might be a problem, is that if I click somewhere where there are multiple values on top of each other, I want the values underneath each other but keep one column name (like the picture above), and not like this:

Could someone help me with this? I'm not an experienced coder.

score 0 · Answer 1 · answered Sep 01 '16 at 16:03

This is not really the best question for Stackoverflow (hence the down votes), but I can point you in the right direction.

Basically, you need to start the table <table>, then create a row with <tr> and create your table headings in it with the <th> tag.

Once you have your heading, then use the for loop above to populate the table with data.

Also, you can refer to here to see examples of Horizontal and Vertical headings.

Jonas Wilms · Answer 2 · 2016-09-01T16:12:43.687

Ok i dont want to do the whole coding for you, thats why i write something like an api that may help you:

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

Use like this:

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

build a table in javascript and html

2 Answers2