2012-10-18 12 views
25

Ho un oggetto JavaScript con circa 1000 proprietà e voglio creare un <table> di queste voci, con otto proprietà in una singola riga, <tr>.Come faccio a forzare jQuery append a NON chiudere automaticamente un tag?

Sto usando jQuery append(); tuttavia, viene automaticamente aggiunto un tag di chiusura </tr>. Voglio definire manualmente dove dovrebbe andare la chiusura </tr>. Come posso realizzare questo?

L'oggetto:

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... 

Il <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'); 
    } 
} 

L'uscita rotto:

<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 

risposta

39

Se si aggiunge che, ovviamente, provare a chiudere i tag. Prova a mettere il tuo html in una stringa piuttosto che aggiungere quella stringa alla 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); 
12

Stai pensando in termini di markup HTML, con l'utilizzo di accodare dovresti pensare in termini di codice HTML DOM, non hai tag aperti e chiudi tag solo elementi.

è possibile utilizzare una stringa per costruire il vostro html quindi aggiungere alla tabella

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