代码之家 › 专栏 › 技术社区 › etoisarobot

在将JSON数据格式化为HTML表时,如何计算在何处添加`<tr>和</tr>`?

json jquery

etoisarobot · 技术社区 · 14 年前

所以我想做的事肯定已经做了几千次了。我只是找不到解决办法。

{
  "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> .

1 回复 | 直到 4 年前

Lazarus 14 年前

使用模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>