2012-10-18 11 views
25

約1000のプロパティを持つJavaScriptオブジェクトがあり、<tr>という8つのプロパティを持つこれらのエントリの<table>を作成したいとします。jQueryを強制的に追加してタグを自動的に閉じないようにするにはどうすればよいですか?

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 

答えて

39

それを追加し、あなたのhtmlを構築するために、文字列を使用することができます。 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); 
12

あなたはAPPENDを使用して、HTMLマークアップの観点で考えていますあなたはhtmlの面で考えるべきであるDOMには、開いているタグと閉じたタグだけの要素はありません。

あなたはそれが明らかにタグを閉鎖しようと付け加えた場合、テーブルに

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); 
関連する問題