Javascript 在AJAX中动态生成HTML行

这有点难解释，我会尽力的

我有一个基于Spring的网站，它使用带有AJAX和jQuery的静态HTML页面。我想在一个HTML页面中呈现一些大小不一的信息

我有一张这样的桌子：（不要介意糟糕的设计）

因此，根据API返回的国家和用户数量，我希望有不同的行数

我目前正在使用jQuery函数在提交此表单后注入HTML代码：

例如：

$('#stats').submit((event) => {
  event.preventDefault();
  $.ajax({
      url: '/api/stats/' + $(event.currentTarget).serialize(),
      type: 'GET',
      success(msg) {
          // language=HTML
          $('#result').html(`
            <div class="container">
                <h2>Country stats:</h2>
                <div class="panel panel-group">
                    <table>
                        <thead>
                            <tr> 
                                <th>Country</th>
                                <th>Users</th>
                            </tr>
                         </thead>
                         <tbody>
                            <tr> <!-- I want to generate here the right amount of rows -->
                                <td>Test</td>
                                <td>2</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>`);
      },
      error() {
          $('#result').html("<div class='alert alert-danger lead'>ERROR</div>");
      },
  });

等等

---

如果N是countries数组的大小，如何呈现N行？

我会将HTML的其余部分分配给如下变量：

var html = `<div class="container">
            <h2>Country stats:</h2>
            <div class="panel panel-group">
                <table>
                    <thead>
                        <tr> 
                            <th>Country</th>
                            <th>Users</th>
                        </tr>
                     </thead>
                     <tbody>`;

var html=`
国家统计：
国家
使用者
`;

然后，添加行：

for(var i = 0; i < msg.countries.length; i++){
    html += "<tr><td>" + msg.countries[i].data + "</td><td>" + msg.countries[i].users + "</td></tr>";
}

for（变量i=0；i

最后，添加HTML的结尾并将其设置为元素：

html += `</tbody>
                </table>
            </div>
        </div>`;
$('#result').html(html);

html+=`
`;
$（'#result'）.html（html）；

---

希望这有帮助

我会将HTML的其余部分分配给如下变量：

var html = `<div class="container">
            <h2>Country stats:</h2>
            <div class="panel panel-group">
                <table>
                    <thead>
                        <tr> 
                            <th>Country</th>
                            <th>Users</th>
                        </tr>
                     </thead>
                     <tbody>`;

var html=`
国家统计：
国家
使用者
`;

然后，添加行：

for(var i = 0; i < msg.countries.length; i++){
    html += "<tr><td>" + msg.countries[i].data + "</td><td>" + msg.countries[i].users + "</td></tr>";
}

for（变量i=0；i

最后，添加HTML的结尾并将其设置为元素：

html += `</tbody>
                </table>
            </div>
        </div>`;
$('#result').html(html);

html+=`
`;
$（'#result'）.html（html）；

---

希望这有帮助

一种解决方案是将“html”内容分为三部分：区域的开始，根据国家数组的大小为每行创建一个循环，然后是区域的结束：

$('#stats').submit((event) => {
  event.preventDefault();
  $.ajax({
  url: '/api/stats/' + $(event.currentTarget).serialize(),
  type: 'GET',
  success(msg) {
      // language=HTML

      // The begin of your html bloc
      var result = `
            <div class="container">
                <h2>Country stats:</h2>
                <div class="panel panel-group">
                    <table>
                        <thead>
                            <tr> 
                                <th>Country</th>
                                <th>Users</th>
                            </tr>
                         </thead>
                         <tbody>
                   `;

      // Just get your countries array here and loop, this can be wrong
      $.each(response.countries, function() {
          // build each row as you need
          result += '<tr>' + 
                        '<td>' + this.data + '</td>' +
                        '<td>' + this.users + '</td>' +
                     '</tr>';
      });

      // The end of your html bloc
      result += `              
                    </tbody>
                </table>
            </div>
        </div>
                `;

      $('#result').html(result);
  },
  error() {
      $('#result').html("<div class='alert alert-danger lead'>ERROR</div>");
  },
 });

$（'#stats'）。提交（（事件）=>{
event.preventDefault（）；
$.ajax({
url:'/api/stats/'+$（event.currentTarget）.serialize（），
键入：“GET”，
成功（味精）{
//语言=HTML
//html块的开始
var结果=`
国家统计：
国家
使用者
`;
//只需将您的国家/地区数组放到这里并循环，这可能是错误的
美元。每个（response.countries，function（）{
//根据需要构建每一行
结果+=''+
''这个+数据''+
''+this.users+''+
'';
});
//html区的结尾
结果+=`
`;
$（'#result'）.html（result）；
},
错误（）{
$（'#result'）.html（“错误”）；
},
});

---

这就是您想要的吗？

一个解决方案可以是将“html”内容分为三部分：区域的开始，根据国家/地区数组的大小为每行循环，然后是区域的结束：

$('#stats').submit((event) => {
  event.preventDefault();
  $.ajax({
  url: '/api/stats/' + $(event.currentTarget).serialize(),
  type: 'GET',
  success(msg) {
      // language=HTML

      // The begin of your html bloc
      var result = `
            <div class="container">
                <h2>Country stats:</h2>
                <div class="panel panel-group">
                    <table>
                        <thead>
                            <tr> 
                                <th>Country</th>
                                <th>Users</th>
                            </tr>
                         </thead>
                         <tbody>
                   `;

      // Just get your countries array here and loop, this can be wrong
      $.each(response.countries, function() {
          // build each row as you need
          result += '<tr>' + 
                        '<td>' + this.data + '</td>' +
                        '<td>' + this.users + '</td>' +
                     '</tr>';
      });

      // The end of your html bloc
      result += `              
                    </tbody>
                </table>
            </div>
        </div>
                `;

      $('#result').html(result);
  },
  error() {
      $('#result').html("<div class='alert alert-danger lead'>ERROR</div>");
  },
 });

$（'#stats'）。提交（（事件）=>{
event.preventDefault（）；
$.ajax({
url:'/api/stats/'+$（event.currentTarget）.serialize（），
键入：“GET”，
成功（味精）{
//语言=HTML
//html块的开始
var结果=`
国家统计：
国家
使用者
`;
//只需将您的国家/地区数组放到这里并循环，这可能是错误的
美元。每个（response.countries，function（）{
//根据需要构建每一行
结果+=''+
''这个+数据''+
''+this.users+''+
'';
});
//html区的结尾
结果+=`
`;
$（'#result'）.html（result）；
},
错误（）{
$（'#result'）.html（“错误”）；
},
});

---

这就是你想要的吗？

构建html？

var rows=''；msg.countries.forEach（（country）=>rows+=''+country.data+）；

然后将

rows

集中到你的

$result

？好的，那很容易，嗯。请发布一个答案，这样我就可以接受了！构建html？

var rows=''；msg.countries.forEach(（国家=>行+=“”+country.data+“”）

然后将

行

添加到你的

$result

？好吧，这很简单，嗯。请作为答案发布，这样我就可以接受了！别忘了从html块的末尾删除

Test2

！是的，很抱歉在你发布anwser之前我就开始写了，但你更快了！我编辑了我的帖子；）我喜欢你使用

$。每一个
。你可以充实
//你的数据
部分来真正完成答案。谢谢，我感谢你的编辑。我尝试运行代码，似乎出现了一些错误。我建议使用来构建字符串，因为只有引用多行字符串才会在JavaScript中引发错误。而且s将在
每个
后面缺少一个括号。干得好！@showdev:感谢您的反馈，我添加了缺少的“；”，并更改了类名的“by”，以避免与其他“…”冲突。我真的看不到您的