Construire une table html avec jQuery réponse xml

Question

Je tente de itérer une réponse d'une requête Ajax jQuery (retour en XML).

Avec cette réponse, je construis un tableau HTML avec 3 colonnes (capables d'un nombre illimité de lignes). Une fois que le noeud XML 4 / « société » se trouve, il doit commencer une nouvelle ligne dans la table. Toute aide à la JS pour déterminer quand il convient d'ajouter la nouvelle ligne est le plus apprécié. Merci!

JS exemple:

/* jQuery Ajax Call here */

success: function(xml){  
    var trow = $("<tr>");  
    $(xml).find("Company").each(function(index){  
    var cellData = "<td width=\"33%\" valign=\"top\" ><div class=\"container\">"+
"<div class=\"item\"><a href=\"#\" title=\"\" target=\"\">"+ $(this).attr("Name")+ "</a></div>"+  
"<div class=\"description\">"+ $(this).attr("Description") + "</div></div></div></td>";  
    $(cellData).appendTo(trow);   
      });  
      trow.appendTo('#tbl');  
    }  
  });  

});

réponse XML Exemple de service web:

<Companies>
    <Company ID="6" Name="Company name 1" Description="Lorem ipsum" />
    <Company ID="22" Name="Company name 2" Description="Lorem ipsum" />
    <Company ID="28" Name="Company name 3" Description="Lorem ipsum" />
    <Company ID="31" Name="Company name 4" Description="Lorem ipsum" />
</Companies>

Answer 1

L'opérateur modulo est idéal pour des choses comme ça. Fondamentalement, il divise un nombre par un autre numéro et retourne le reste. Alors 1 % 4 = 1 et 4 % 4 = 0 et 8 % 4 = 0:

success: function(xml){
    var trow = $("<tr>"), table = $("#tbl");  
    $(xml).find("Company").each(function(index){  
        var cellData =  "<td width=\"33%\" valign=\"top\" ><div class=\"container\">"+
                        "<div class=\"item\"><a href=\"#\" title=\"\" target=\"\">"+ 
                        $(this).attr("Name")+ "</a></div>" +  
                        "<div class=\"description\">" + $(this).attr("Description") + 
                        "</div></div></div></td>";
        $(cellData).appendTo(trow);   
        if( (index + 1) % 4 == 0) {
            trow.appendTo(table);
            trow = $("<tr>");
        }

      });  
      if(trow.is(':not(:empty)')) trow.appendTo(table);  
    }  
    });
});

I également enregistré $("#tbl") dans une variable pour réduire le nombre de consultations.