Javascript - Automatically switch/create to another row if a row is filled with 4 cells in a table

Question

I think that the title is self-explanatory. I am retrieving data using XMLHttpRequest and the data is getting appended into columns of a table. I decided to only allow a row to have only 4 columns inside it and if another item exists then it should be appended into another row. This is what I have done:

//...
//unneccessary
//...
            var album_photos = JSON.parse(xhr2.responseText);
            for(var i = 0; i < album_photos.length; i++) {
                if(!isInArray(album_photos[i].Image_ID, image_ids)) {
                    var tr = document.getElementById("tiare");
                    if(i % 4 == 0) {
                        tr = document.createElement("tr");
                        document.getElementById("images").appendChild(tr);

                    }
//...
//creating elements to be append
//...
                    tr.appendChild(td);
                    td.appendChild(imagewrap);
                    imagewrap.appendChild(imagemenu);
                    imagemenu.appendChild(imagemenuimg1);
                    imagemenu.appendChild(imagemenuimg2);
                    imagewrap.appendChild(imagewrapimg);
                    image_ids.push(album_photos[i].Image_ID);
//...![enter image description here][1]
//unneccessary
//...

And this is the markup:

<table width="80%" id="images">
    <tr id="tiare">

    </tr>
</table>

See how it's not getting splitted correctly:

How can I achieve this, my logic is not working at all! What should I do?

P.S: No jQuery solution allowed. :)

Any help would be appreciated. Thanks in advance. :)

UPDATE: I changed my code into this:

function getAlbumImages() {
    var xhr2 = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr2.open('GET', 'admin/images_data.php');

    xhr2.onreadystatechange = function(e) {
        if(xhr2.readyState == 4 && xhr2.status == 200) {
            var oldtable = document.getElementById("images");
            var newtable = oldtable.cloneNode();
            var tr = document.createElement("tr");

            var album_photos = JSON.parse(xhr2.responseText);
            for(var i = 0; i < album_photos.length; i++) {
                if(!isInArray(album_photos[i].Image_ID, image_ids)) {
                    if(i%4 == 0 && i != 0){
                        newtable.appendChild(tr);
                        tr = document.createElement('tr');        
                    }
                    var td = document.createElement('td');
                    var imagewrap = document.createElement('div');
                    imagewrap.className = "image-wrap";
                        var imagemenu = document.createElement('div');
                        imagemenu.className = "image-menu";
                            var imagemenuimg1 = document.createElement('img');
                            imagemenuimg1.src = "img/edit_img.png";
                            var imagemenuimg2 = document.createElement('img');
                            imagemenuimg2.src = "img/close.png";
                        var imagewrapimg = document.createElement('img');
                        imagewrapimg.className = "thumbnail";
                        imagewrapimg.src = "admin/album_photos/" + album_photos[i].Image_Path;
                        imagewrapimg.onclick = function() { showBigImage(this); };
                    tr.appendChild(td);
                    td.appendChild(imagewrap);
                    imagewrap.appendChild(imagemenu);
                    imagemenu.appendChild(imagemenuimg1);
                    imagemenu.appendChild(imagemenuimg2);
                    imagewrap.appendChild(imagewrapimg);
                    image_ids.push(album_photos[i].Image_ID);
                } else {
                    continue;
                }
            }
            newtable.appendChild(tr);
            oldtable.parentNode.replaceChild(newtable, oldtable);
        }
    }
    xhr2.send(null);
}

This function is called inside an setInterval with 5000 milliseconds break.

The problem coming now is that it disappears after 5 seconds. How can I resolve that?

Answer 1

The first problem I see is that i and i % 4 is not the images in your table, it's the images in the returned data. The two will differ as soon as you encounter an image already in your array. You need to use an index for the i % 4 that is the actual number of images in the table. You could use a separate count of how many images are in the table that you intialize with:

var imageCnt = document.getElementById("images").getElementsByTagName("td").length

And, the increment that any time you add an image to the table and then check %imageCnt % 4 to decide when to add a new row.

Then, don't you want to be adding images to the LAST row in the table, not the first row in the table because that's where the extra slots will be and where the new empty row goes. You will be adding images to the last row when you've just created a new row, but not when your last row is partially filled when you start. In that case, you'll be adding images to the first row. You can start with the last row

var table = document.getElementById("images");
var lastRow = table.rows[table.rows.length - 1];

---

Applying these to your first example of code would work like this:

//...
//unneccessary
//...
            var album_photos = JSON.parse(xhr2.responseText);
            var table = document.getElementById("images");
            var tableBody = table.getElementsByTagName("tbody")[0];
            var lastRow = table.rows[table.rows.length - 1];
            // initialize cell count
            var cellCount = table.getElementsByTagName("td").length;
            for(var i = 0; i < album_photos.length; i++) {
                if(!isInArray(album_photos[i].Image_ID, image_ids)) {
                    if (cellCount % 4 == 0 && cellCount !== 0) {
                        // make new row and append it to the table body
                        lastRow = document.createElement("tr");
                        tableBody.appendChild(lastRow);
                    }
//...
//creating elements to be append
//...
                    td.appendChild(imagewrap);
                    imagewrap.appendChild(imagemenu);
                    imagemenu.appendChild(imagemenuimg1);
                    imagemenu.appendChild(imagemenuimg2);
                    imagewrap.appendChild(imagewrapimg);
                    // best to append the new cell when it's fully formed
                    lastRow.appendChild(td);
                    ++cellCount;
                    image_ids.push(album_photos[i].Image_ID);
//...![enter image description here][1]
//unneccessary