jQuery Construire une table

Question

menuOrder est un vide div

$("#menuOrder").append('<table>'); 

$(menus).each(function(i, menu) { 
    $("#menuOrder").append('<tr><td>'); 
    $("#menuOrder").append(menu.text); 
    $("#menuOrder").append('</td><td>'); 

    if (i > 0) { 
    $("#menuOrder").append('<img src="/images/_images/up.png" />'); 
    } else { 
    $("#menuOrder").append('<img src="/images/_images/blank.png" />'); 
    } 

    if (i < menus.length - 1) { 
    $("#menuOrder").append('<img src="/images/_images/down.png" />'); 
    } 

    $("#menuOrder").append('</td>'); 
    $("#menuOrder").append('</tr>'); 
}); 

$("#menuOrder").append('</table>'); 

ce code fonctionne pas correctement, comment puis-je changer avec itérations minimum?

Answer 1

Essayez de faire quelque chose comme ceci:

var rows = []; 
$(menus).each(function(i, menu) { 
var row = '<tr><td>'.menu.text.'</td><td>'; 

    if (i > 0) { 
     row +='<img src="/images/_images/up.png" />'; 
    } 
    else { 
     row +='<img src="/images/_images/blank.png" />'; 
    } 

    if (i < menus.length - 1) { 
     row +='<img src="/images/_images/down.png" />'; 
    } 

    row += '</td></tr>'; 
    rows.push(row); 
}); 
$('<table></table>').append(rows.join('')).appendTo('#menuOrder'); 

Ce remplit le tableau rows avec une chaîne qui contient le code HTML pour chaque ligne. Lorsque c'est fait en créant toutes les lignes, alors il crée un objet jQuery d'un élément de table et y ajoute toutes les lignes. Il ajoute ensuite la table à #menuOrder.

Answer 2

Notez que avec append() vous ne pouvez pas le faire:

$("#menuOrder").append('</table>'); 

Au lieu de coller ensemble des morceaux de chaînes HTML, vous devez penser en termes de noeuds DOM complets. Des exemples d'arguments valables pour append():

.append($('.something')) 
.append(document.createElement('div')) 
.append('<div />') // automatically creates empty div element 
.append('<tr><td></td></tr>') // automatically creates tr with td inside