Tin*_* CG 29 jquery html-table
我有一个包含大约1000个属性的JavaScript对象,并希望创建一个<table>这样的条目,在一行中有八个属性,<tr>.
我正在使用jQuery append(); 但是,它会自动附加结束</tr>标记.我想手动定义结束的位置</tr>.我该如何做到这一点？
物体:
var g2u = {};
g2u.a1 = "";
g2u.a2 = "";
g2u.a3 = "";
g2u.a4 = "";
g2u.a5 = "";
g2u.a5a = "";
g2u.a6 = "";
g2u.a6a = "";
g2u.a6b = "";
... 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"> </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"> </span><td><span class="rom">a2</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a3</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a4</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a5</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a5a</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a6</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a6a</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a6b</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a7</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a8</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a9</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a10</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a11</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a12</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a13</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a14</span></td><span class="eh">?</span><span class="rom"> </span><td><span class="rom">a14a</span></td><span class="eh">?</span><span class="rom"> </span><td><spa
zev*_*boy 52
如果你附加它显然会尝试关闭标签.尝试将您的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"> </span></td>\n';
ctr++;
if (ctr % 8 == 0) {
html+='</tr><tr>\n';
}
}
$("#list").append(html);
Mus*_*usa 13
你正在考虑使用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"> </span></td>\n';
ctr++;
if (ctr % 8 == 0) {
innerTable += '</tr><tr>\n';
}
}
$("#list").append(innerTable);
小智 7
七年了，但我坚信我可以帮助遇到类似问题的其他人。例如，如果您想使用 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>