Créer une table avec jQuery - append

Question

J'ai sur la page div:

 <div id="here_table"></div>
 

et en jquery:

 for(i=0;i<3;i++){
    $('#here_table').append( 'result' +  i );
}
 

cette génération pour moi:

 <div id="here_table">
    result1 result2 result3 etc
</div>
 

Je voudrais recevoir ceci dans le tableau:

 <div id="here_table">
    <table>
          <tr><td>result1</td></tr>
          <tr><td>result2</td></tr>
          <tr><td>result3</td></tr>
    </table>
</div>
 

Je fais:

 $('#here_table').append(  '<table>' );

 for(i=0;i<3;i++){
    $('#here_table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}

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

mais cela génère pour moi:

 <div id="here_table">
    <table> </table> !!!!!!!!!!
          <tr><td>result1</td></tr>
          <tr><td>result2</td></tr>
          <tr><td>result3</td></tr>
</div>
 

Pourquoi? Comment puis-je le faire correctement?

EN DIRECT: http://jsfiddle.net/n7cyE/

Answer 1

Cette ligne:

 $('#here_table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );
 

Ajoute au div#here_table pas le nouveau table .

Il y a plusieurs approches:

 /* Note that the whole content variable is just a string */
var content = "<table>"
for(i=0; i<3; i++){
    content += '<tr><td>' + 'result ' +  i + '</td></tr>';
}
content += "</table>"

$('#here_table').append(content);
 

Cependant, avec l'approche ci-dessus, il est moins facile d'ajouter des styles et de faire des choses de manière dynamique avec <table> .

Mais que dire de celui-ci, il fait ce que vous attendez presque génial:

 var table = $('<table></table>').addClass('foo');
for(i=0; i<3; i++){
    var row = $('<tr></tr>').addClass('bar').text('result ' + i);
    table.append(row);
}

$('#here_table').append(table);
 

J'espère que cela aiderait.

Answer 2

Vous devez ajouter l' tr à l'intérieur de l' table j'ai donc actualisé de votre sélection à l'intérieur de votre boucle et retiré de la clôture table parce qu'il n'est pas nécessaire.

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

 for(i=0;i<3;i++){
    $('#here_table table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}

Le principal problème était que vous étiez en ajoutant l' tr de la div here_table.

Edit: Voici une version JavaScript si la performance est un sujet de préoccupation. L'aide d'un fragment de document ne sera pas provoquer un reflux pour chaque itération de la boucle

var doc = document;

var fragment = doc.createDocumentFragment();

for (i = 0; i < 3; i++) {
    var tr = doc.createElement("tr");

    var td = doc.createElement("td");
    td.innerHTML = "content";

    tr.appendChild(td);

    //does not trigger reflow
    fragment.appendChild(tr);
}

var table = doc.createElement("table");

table.appendChild(fragment);

doc.getElementById("here_table").appendChild(table);

Answer 3

Lorsque vous utilisez append , jQuery s'attend à ce qu'il s'agisse d'un code HTML bien formé (le texte brut compte). append n'est pas comme faire += .

Vous devez d'abord créer le tableau, puis l'ajouter.

 var $table = $('<table/>');
for(var i=0; i<3; i++){
    $table.append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}
$('#here_table').append($table);
 

Answer 4

Ou faites-le de cette manière pour utiliser ALL jQuery. Chacun peut parcourir toutes les données, qu'il s'agisse d'éléments DOM ou d'un tableau / objet.

 var data = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
var numCols = 1;           


$.each(data, function(i) {
  if(!(i%numCols)) tRow = $('<tr>');

  tCell = $('<td>').html(data[i]);

  $('table').append(tRow.append(tCell));
});
​
 

http://jsfiddle.net/n7cyE/93/

Answer 5

Pour ajouter plusieurs colonnes et lignes, nous pouvons également faire une concaténation de chaîne. Pas le meilleur moyen, mais ça marche.

              var resultstring='<table>';
      for(var j=0;j<arr.length;j++){
              //array arr contains the field names in this case
          resultstring+= '<th>'+ arr[j] + '</th>';
      }
      $(resultset).each(function(i, result) {
          // resultset is in json format
          resultstring+='<tr>';
          for(var j=0;j<arr.length;j++){
              resultstring+='<td>'+ result[arr[j]]+ '</td>';
          }
          resultstring+='</tr>';
      });
      resultstring+='</table>';
          $('#resultdisplay').html(resultstring);
 

Cela vous permet également d'ajouter des lignes et des colonnes à la table de manière dynamique, sans coder en dur les noms de champs.