Question

大家好我想尝试使用以下代码在表格单元格（一行中有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>

Answer 1

在您的代码中，openin标记<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>

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

如何为每个表行输出3个单元格（）以获得ajax响应？

2 个答案: