Comment calculer où ajouter `<tr> et </ tr>` lors du formatage des données JSON comme un tableau HTML?

voix
0

Donc ce que je veux faire, je suis sûr que cela a été fait des milliers de fois. Je suis juste de la difficulté à trouver la solution.

Je reçois certaines données JSON qui ressemble à ceci

{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 
 ]
 }
}

et je veux afficher les images dans une table qui est 4 colonnes. Je donne les résultats suivants

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

Mais je ne l' ai pas eu de chance dans le calcul où placer le la <tr> and the </tr>.

Créé 17/08/2010 à 16:49
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
2

Garder un total cumulé et briser en utilisant modulo 4 (totalImages% 4 == 0).

Ça devrait le faire.

c'est à dire:

<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>
Créé 17/08/2010 à 16:50
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more