Question

我有一个包含大约1000个属性的JavaScript对象，并希望创建这些条目的<table>个，在一行中有八个属性<tr>。

我正在使用jQuery append();但是，它会自动附加结束</tr>标记。我想手动定义结束</tr>应该去哪里。我该如何做到这一点？

对象：

var g2u = {};

g2u.a1 = "&#xe000;";
g2u.a2 = "&#xe001;";
g2u.a3 = "&#xe002;";
g2u.a4 = "&#xe003;";
g2u.a5 = "&#xe004;";
g2u.a5a = "&#xe005;";
g2u.a6 = "&#xe006;";
g2u.a6a = "&#xe007;";
g2u.a6b = "&#xe008;";
... etc...

<table>：

<table id="list" border="1">
</table>

<script>
var ctr = 0;
$("#list").append('<tr>');

for (var g in g2u) {
  $("#list").append('<td><span class="rom">'+g+'</span>\n');
  $("#list").append('<span class="eh">'+g2u[g]+'</span>\n');
  $("#list").append('<span class="rom">&nbsp;&nbsp;</span></td>\n');
  ctr++;
  if (ctr % 8 == 0) {
    $("#list").append('</tr><tr>\n');
  }
}

已损坏的输出：

<tbody><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr></tbody>
<td><span class="rom">a1</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a2</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a3</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a4</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a5</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a5a</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a6</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a6a</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a6b</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a7</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a8</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a9</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a10</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a11</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a12</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a13</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a14</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a14a</span></td><span class="eh"></span><span class="rom">&nbsp;&nbsp;</span><td><spa

Answer 1

如果你附加它显然会尝试关闭标签。尝试将html放在一个字符串中，而不是将该字符串附加到dom。

    <script>
    var ctr = 0;
    var html='<tr>';

    for (var g in g2u) {
      html+='<td><span class="rom">'+g+'</span>\n';
      html+='<span class="eh">'+g2u[g]+'</span>\n';
      html+='<span class="rom">&nbsp;&nbsp;</span></td>\n';
      ctr++;
      if (ctr % 8 == 0) {
        html+='</tr><tr>\n';
      }
    }


     $("#list").append(html);

Answer 2

你正在考虑使用html标记，使用append你应该考虑html DOM，你没有开放标记和关闭标记只是元素。

您可以使用字符串构建html，然后将其附加到表

var ctr = 0;
var innerTable = '<tr>';

for (var g in g2u) {
  innerTable += '<td><span class="rom">'+g+'</span>\n';
  innerTable += '<span class="eh">'+g2u[g]+'</span>\n';
  innerTable += '<span class="rom">&nbsp;&nbsp;</span></td>\n';
  ctr++;
  if (ctr % 8 == 0) {
    innerTable += '</tr><tr>\n';
  }
}
$("#list").append(innerTable);

Answer 3

七年了，但是我想我可以帮助遇到类似问题的任何其他人。例如，如果您想将JQuery的$ .each（）与.append（）结合使用来创建用户列表，例如：

<ul>
  <li>User 1</li>
  <li>User 2</li>
</ul>

这是您不想做的事情：

element.append(`<ul>`);
$.each(users, function(key, value) {
  element.append(`<li>${value.name}</li>`);
});
element.append(`</ul>`);

输出将类似于：

<ul></ul>
<li>User 1</li>
<li>User 2</li>

相反，这是您想做的事情：

element.append(`<ul id="ul-users"></ul>`);
$.each(users, function(key, value) {
  $("#ul-users").append(`<li>${value.name}</li>`);
});

所以输出如下：

<ul id="ul-users">
  <li>User 1</li>
  <li>User 2</li>
</ul>

如何强制jQuery追加不自动关闭标签？

3 个答案: