javascript - 如何为 ajax 响应在每个表行输出 3 个单元格 (<td> </td>)？-6ren

javascript - 如何为 ajax 响应在每个表行输出 3 个单元格 ( )？

转载作者：行者123 更新时间：2023-11-30 21:06:54

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

最佳答案

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

关于javascript - 如何为 ajax 响应在每个表行输出 3 个单元格 (<td> </td>)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46515963/

文章推荐： c - 为什么会出现段故障11

文章推荐： c - C 中无法接受字符串中的空格

文章推荐： c - 双向链表循环

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何为 ajax 响应在每个表行输出 3 个单元格 ( )？