如何为每个表格行输出 3 个单元格 (<td> </td>) 以进行 ajax 响应？答案

【问题标题】：how to output 3 cells (<td> </td>) per table row for ajax response?如何为每个表格行输出 3 个单元格 (<td> </td>) 以进行 ajax 响应？
【发布时间】：2017-10-02 07:35:26
【问题描述】：

大家好，我正在尝试使用以下代码在表格单元格（一行 3 个单元格）中显示一些 div，但我不断收到包含缺失数据的不正确表格。谁能告诉我如何解决这个问题并每行显示 3 个 div。谢谢

这是正确和错误输出的图像：

带有示例数据的完整代码：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

function myFunction()
{

alert("inside function");
var response= "[\r\n  {\r\n    \"ID\": \"1\",\r\n    \"Title\": \"title 1 \",\r\n   \"Text\": \"\",\r\n   \"ImageUrl\": \"http://awebsite/imagges/1/102.jpg\",\r\n   \"Note\": null\r\n },\r\n  {\r\n    \"ID\": \"2\",\r\n    \"Title\": \"title 2\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/2/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"3\",\r\n    \"Title\": \"title 3\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/3/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"4\",\r\n    \"Title\": \"title 4\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/4/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"5\",\r\n    \"Title\": \"title 5\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/5/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"6\",\r\n    \"Title\": \"title 6\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/6/102.jpg\",\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"7\",\r\n    \"Title\": \"title 7\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/7/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"8\",\r\n    \"Title\": \"title 8\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/8/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"9\",\r\n    \"Title\": \"title 9\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/9/102.jpg\",\r\n    \"Note\": null\r\n  }\r\n]";

var json = $.parseJSON(response);
var html='';
var x=0; // x is number of cells per row maximum 2 cells per row

for(i in json)
{

   // create HTML code
       var div = "<div class=\"image\">\n" + 
       "<a href=\"javascript:doIt('" + json[i].ID + "')\">\n" +
       "<img src=\""+ json[i].ImageUrl +"\"  alt=\"\" />"+ json[i].Title +"\n" +
       "</a>\n" +
       "</div>\n";


if(x<3)
{

//alert("1 value of x is:"+x);
html += '<td>'+div+'</td>\n';

//$('#demo > tbody').append(html );
x=x+1;

}else
{
   //go to next row and print </tr><tr>
//alert("2 value of x is:"+x);
   html += '</tr>\n\n<tr>\n';

$('#demo > tbody').append(html);

x=0;
};

$('#demo > tbody').append(html);

};

};

</script>

</head>

<body onload="myFunction()">

<div class="scroller">

Incorrect :<br>
<table id="demo" cellspacing="0" border="1" style="display: visible;">
  <thead>

      <th>A</th>
      <th>B</th>
      <th>C</th>
  </thead>

  <tbody>

  </tbody>
</table>

</div>

</body>
</html>

【问题讨论】：

标签： javascript jquery for-loop html-table

【解决方案1】：

在您的代码中，打开标签<tr> 未添加到第一个<td>。您正在附加 html 两次。您需要形成正确的 html，然后在 for 循环后将其添加到表中。你也不需要';'条件和标准函数定义代码块末尾的逗号。

function myFunction() {
  var response = "[\r\n  {\r\n    \"ID\": \"1\",\r\n    \"Title\": \"title 1 \",\r\n   \"Text\": \"\",\r\n   \"ImageUrl\": \"http://awebsite/imagges/1/102.jpg\",\r\n   \"Note\": null\r\n },\r\n  {\r\n    \"ID\": \"2\",\r\n    \"Title\": \"title 2\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/2/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"3\",\r\n    \"Title\": \"title 3\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/3/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"4\",\r\n    \"Title\": \"title 4\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/4/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"5\",\r\n    \"Title\": \"title 5\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/5/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"6\",\r\n    \"Title\": \"title 6\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/6/102.jpg\",\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"7\",\r\n    \"Title\": \"title 7\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/7/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"8\",\r\n    \"Title\": \"title 8\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/8/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"9\",\r\n    \"Title\": \"title 9\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/9/102.jpg\",\r\n    \"Note\": null\r\n  }\r\n]";

  var json = $.parseJSON(response);
  var html = '';
  var x = 0; // x is number of cells per row maximum 2 cells per row

  for (i in json) {

    // create HTML code
    var div = "<div class=\"image\">\n" +
      "<a href=\"javascript:doIt('" + json[i].ID + "')\">\n" +
      "<img src=\"" + json[i].ImageUrl + "\"  alt=\"\" />" + json[i].Title + "\n" +
      "</a>\n" +
      "</div>\n";


    //alert("x is:"+x);
    div = '<td>' + div + '</td>\n';

    if (x === 0) {
      html += '<tr>' + div;
      x++;
    } else if (x === 1) {
      html += div;
      x++;
    } else if (x === 2) {
      html += div + '</tr>';
      x = 0;
    }

  } //end of for loop

  $('#demo > tbody').append(html);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onload="myFunction()">
  <div class="scroller">
    <br>
    <table id="demo" cellspacing="0" border="1" style="display: visible;">
      <thead>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</body>

【讨论】：

感谢您的演示。它解决了这个问题。有没有办法让第一个单元格预先选择发光边框并使 div 图像（所有图像均为 640 x 360 像素）完全适合每个单元格，具体取决于用户设备屏幕（iphone、ipad、tv）的宽度？
我可以知道为什么你上面的例子在两行之间创建了空的吗？
我忘了关闭</tr> 标签，我修复了它。它可能会导致该错误。
@user1788736 这是您第二个问题的答案：jsfiddle.net/BekirUzun/q9b4sj8v
非常感谢您回答我的问题。你认为即使在宽屏电视上它也会每行放置 3 张图像？我的目标是在电视屏幕上保持与您最后一个 jsfiddle 相同的布局。这可能吗？怎么样？

【解决方案2】：

我想我会提供不同的解决方案。

https://jsfiddle.net/wfc9p0e8/

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

<style>
  #table{ display: table; width:100%; }
  #table .table-cell { display: inline-table; width:33.33%;  }
</style>

<div class="scroller">

    <div id="table"></div>

</div><!--scroller-->

<script>

$(document).ready(function(){

var response= "[\r\n  {\r\n    \"ID\": \"1\",\r\n    \"Title\": \"title 1 \",\r\n   \"Text\": \"\",\r\n   \"ImageUrl\": \"http://awebsite/imagges/1/102.jpg\",\r\n   \"Note\": null\r\n },\r\n  {\r\n    \"ID\": \"2\",\r\n    \"Title\": \"title 2\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/2/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"3\",\r\n    \"Title\": \"title 3\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/3/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"4\",\r\n    \"Title\": \"title 4\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/4/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"5\",\r\n    \"Title\": \"title 5\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/5/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"6\",\r\n    \"Title\": \"title 6\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/6/102.jpg\",\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"7\",\r\n    \"Title\": \"title 7\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/7/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"8\",\r\n    \"Title\": \"title 8\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/8/102.jpg\",\r\n    \"Note\": null\r\n  },\r\n  {\r\n    \"ID\": \"9\",\r\n    \"Title\": \"title 9\",\r\n    \"Text\": \"\",\r\n    \"ImageUrl\": \"http://awebsite/imagges/9/102.jpg\",\r\n    \"Note\": null\r\n  }\r\n]";

$.each(JSON.parse(response), function(i, value){

  var html = '<div class="table-cell"><div class="image"><a href=javascript:doIt("'+ value.ID +'")><img src="'+ value.ImageUrl +'" alt="'+ value.Title +'"></a></div></div>';

  $('#table').append(html);

  })
})//doc ready

</script>

</body>
</html>

【讨论】：

请使用 SO sn-p 而不是小提琴。使用 sn-p 有助于未来证明问题和答案。
@Matthew Blackett 感谢您向我展示了不同的方法，但对于我的使用，所有图像都是 640 x 360 像素，您的解决方案将适合每行 2 个图像而不调整它们的大小。我的目标是每行适合 3 个图像根据用户设备屏幕尺寸的宽度行，然后允许通过按下 keydown 来导航这些图像。
您可以使用 CSS 和 jquery 来实现。 IMO 以我的方式来做这件事会更灵活一些，但这确实是您对/您的需求感到最舒服的。 @zze 指出。将来会做。堆栈溢出的新手，因此了解如何最好地提供任何答案:)