jquery - jQueryの追加でタグを自動的に閉じないようにするにはどうすればよいですか？

Question

約1000個のプロパティを持つJavaScriptオブジェクトがあり<table>、これらのエントリを1行に8個のプロパティで作成したいと考えています<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">&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">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a3</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a4</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a5</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a5a</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a6</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a6a</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a6b</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a7</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a8</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a9</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a10</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a11</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a12</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a13</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a14</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><span class="rom">a14a</span></td><span class="eh">&lt;/span><span class="rom">&nbsp;&nbsp;</span><td><spa

Answer 1

追加すると、明らかにタグを閉じようとします。その文字列をdomに追加するよりも、htmlを文字列に入れてみてください。

    <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);