Как рассчитать, куда добавить `<tr> и </tr>` при форматировании данных JSON в виде таблицы HTML?

Question

Так что я хочу сделать, я уверен, что это было сделано тысячи раз. У меня просто проблемы с поиском решения.

Я получаю некоторые данные JSON, которые выглядят следующим образом

{"ImageCollection":
{"Images":
[{  "ImageID":"68",
    "CatID":"1",
    "Location":"/Images/Art/Full/68.gif",
    "ClipLocation":"/Images/Art/Clips/68.gif",
    "FullHeight":"504",
    "FullWidth":"451"
   },
   { "ImageID":"69",
     "CatID":"1",
     "Location":"/Images/Art/Full/69.gif",
     "ClipLocation":"/Images/Art/Clips/69.gif",
     "FullHeight":"364",
     "FullWidth":"500"
    },
    etc. etc 
 ]
 }
}

и я хочу отобразить изображения в таблице шириной 4 столбца. У меня есть следующее

    <script type="text/javascript">
    $.getJSON("/Service/GetJson.ashx?data=images", function(data) {
        var jsObjectData = data.ImageCollection.Images;
        var imageTable = "<table><tbody>";
        var rowMarker = 1;
        var targetRowEnd;
        $.each(jsObjectData, function(i, item) {
            if (
            imageTable = imageTable + "<td class='artImageBox'>";
            imageTable = imageTable + "<a title='Click To Add' class='artImage'>";
            imageTable = imageTable + "<img id='ArtImg";
            imageTable = imageTable + item.ImageID;
            imageTable = imageTable + "' src='../";
            imageTable = imageTable + item.ClipLocation;
            imageTable = imageTable + "' alt='Click To Add' />";
            imageTable = imageTable + "</a></td>";
        });
        imageTable = imageTable + "</tbody></table>";
        alert(imageTable);
        $("body").append(imageTable);
    });
</script>

Но мне не повезло в расчете, где разместить <tr> and the </tr>.

Answer 1

Сохранение промежуточного итога и деление по модулю 4 (totalImages% 4 == 0).

Это должно сделать это.

т.е:.

<script type="text/javascript">
$.getJSON("/Service/GetJson.ashx?data=images", function(data) {
    var jsObjectData = data.ImageCollection.Images;
    var imageTable = "<table><tbody>";
    var rowMarker = 1;
    // Initialise our counter
    var imageCount = 0;
    var targetRowEnd;
    $.each(jsObjectData, function(i, item) {
        // Is the count exactly divisble by 4, i.e. start of a new row
        if (imageCount % 4 == 0) {
            imageTable = imageTable + "<tr>";
        }
        imageTable = imageTable + "<td class='artImageBox'>";
        imageTable = imageTable + "<a title='Click To Add' class='artImage'>";
        imageTable = imageTable + "<img id='ArtImg";
        imageTable = imageTable + item.ImageID;
        imageTable = imageTable + "' src='../";
        imageTable = imageTable + item.ClipLocation;
        imageTable = imageTable + "' alt='Click To Add' />";
        imageTable = imageTable + "</a></td>";
        // Count the image we've just inserted
        imageCount++;
        // If the count is again divisible exactly by 4 then it's the end of a row
        // and will be the start of a new row on the next loop.
        if (imageCount % 4 == 0) {
            imageTable = imageTable + "</tr>";
        }
    });
    // Just in case there are not exactly 4 images in the last row lets
    // add a row terminator for the final row if it hasn't met the condition above
    if (imageCount % 4 != 0) {
        imageTable = imageTable + "</tr>";
    }
    imageTable = imageTable + "</tbody></table>";
    alert(imageTable);
    $("body").append(imageTable);
});
</script>