Change innerHTML depending on input

Question

I am iterating through a JSON-File and get a different amount of features for given locations. This can be 10 or there are only 2, depending on the location. I am able to retrieve the data from the JSON for each location and iterate through all of them at this spot.

GOAL: Depending on the number of features at the location I would like to create a table with max. 3 columns and number/3 rows. If there are e.g. 10 Features just make 3-3-3-1 (2 empty boxes).

var overlay = new ol.Overlay({
    element: document.getElementById('overlay'),
    positioning: 'bottom-left'
    });

var displayImage = function(pixel) {
    var features = [];
    map.forEachFeatureAtPixel(pixel, function(feature,layer){
        features.push(feature);
    },{hitTolerance: 10});
    if (features.length >0) {
        var rows = Math.ceil(features.length / 3);
        var imag = [];
        var years = [];
        console.log(features);
        for (var i = 0, ii = features.length; i < ii; ++i) {
            imag.push(features[i].values_.pointAttributes.Image);
            years.push(features[i].values_.pointAttributes.Year);
            overlay.setPosition(features[i].values_.geometry.flatCoordinates);   
            var element = overlay.getElement();
            console.log(imag);
            element.innerHTML = 
                    "<img ID=\"theImage\" src= \"\">\n\
                                    <table class=\"fototable\"> \n\
                                    <tr><td> <button class=\"btn\" data-img=" + imag[0] + " onclick=\"myFunction(this)\"> " + years[0] + " </button></td>\n\
                                    <td> <button class=\"btn\" data-img=" + imag[1] + " onclick=\"myFunction(this)\"> " + years[1] + " </button> </td>\n\
                                    <td> <button class=\"btn\" data-img=" + imag[2] + " onclick=\"myFunction(this)\"> " + years[2] + " </button> </td></tr> \n\
                                    <tr><td> <button class=\"btn\" data-img=" + imag[3] + " onclick=\"myFunction(this)\"> " + years[3] + " </button></td> \n\
                                    <td><button class=\"btn\" data-img=" + imag[4] + " onclick=\"myFunction(this)\"> " + years[4] + " </button></td>\n\
                                    <td><button class=\"btn\" data-img=" + imag[5] + " onclick=\"myFunction(this)\"> " + years[5] + " </button> </td></tr></table>";

As you might see I hard-coded it so far but this is not the best solution. I tried to do something like adding the ...etc. to a string but I did not manage to get the 3-columns max then.

Any help/link will be appreciated!

You can create a table by code without having to create HTML-strings - you may want to have a look at MDN or W3Schools. Both resources explain the DOM HTMLTableElement which you can use for table-creation / editing etc. — SaschaP
– SaschaP, Commented Aug 27, 2020 at 5:50

nosTa · Accepted Answer · 2020-08-27 06:13:33Z

Have fun :)

let test = [1,2,3,4,5,6,7,8,9,10,11];
let innerHTMLStart = "<table>";
let innerHTMLEnd = "</table>"
let innerHTML = innerHTMLStart;
let lastIndex = test.length - 1;



//loop over our items
for(var i = 0; i < test.length; i++) {
  //first iteration
    if(i % 3 == 0 && i == 0) {
    innerHTML = innerHTML + "<tr>"
  //modulo 3 but not first iteration
  } else if(i % 3 == 0 && i > 0) {
    innerHTML = innerHTML + "</tr><tr>"
  }
  
  //add cells to the table
    innerHTML = innerHTML + "<td>" + test[i] + "</td>";
  if(i == lastIndex) {
  
    //last iteration? how many <td>?
    //always finish with 3 cells
     if((i+1) % 3 == 0) {
        innerHTML = innerHTML + "</tr>"
    } else if((i+1) % 2 == 0) {
        innerHTML = innerHTML + "<td></td><td></td></tr>"
    } else {
    console.log("else")
        innerHTML = innerHTML + "<td></td></tr>"
    }
  }
}

innerHTML = innerHTML + innerHTMLEnd;

console.log(innerHTML)

Eren AY · Accepted Answer · 2020-08-27 06:12:07Z

0

I didn't test that code and probably contains errors but as i understand your question the code below should be suits your needs.

var content ="<table class=\"fototable\"><tr>";
for(var t=0; t<imag.length; t++){
    content+="<td><button class=\"btn\" data-img=\" + imag[t] + \" onclick=\"myFunction(this)\"> " + years[t] + " </button></td>\n\";
    if((t+1)%3==0 && t!=(imag.length-1)){
        content+="</tr><tr>";
    }
}

for(var i = 0; i<3-imag.length%3; i++){
    content+="<td></td>";
}
content+="</tr></table>";

element.innerHtml = content;

answered Aug 27, 2020 at 6:12

Eren AY

485 bronze badges

Collectives™ on Stack Overflow

Change innerHTML depending on input

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related