Je travaille sur le code suivant. J'essaie de comprendre pourquoi je ne suis pas en mesure d'ajouter tous les <td> sur une seule ligne ? Ce que je veux faire, c'est ajouter un <td> personnalisé au début de chaque ligne de manière à ressembler à :

<tr>
    <td>Defult TD</td>
    <td>52</td>
    <td>16</td>
    <td>140</td>
<tr>            

<tr>
    <td>Defult TD</td>
    <td>54</td>
    <td>16</td>
    <td>145</td>
<tr>

Mais ce que je reçois c'est

<tr>
    <td>Defult TD</td>
</tr>
<tr>
    <td>52</td>
    <td>16</td>
    <td>140</td>
<tr>            
<tr>
    <td>Defult TD</td>
</tr>
<tr>
    <td>54</td>
    <td>16</td>
    <td>145</td>
<tr>
var sizes= [
   [52, 16, 140],
   [54, 16, 145]
];
var table = $('#size-rows');
var row, cell;
for (var i = 0; i < sizes.length; i++) {
   row = $('<tr />');
   table.append(row);
   cell = $('<td>Default TD</td>')
   for (var j = 0; j < sizes[i].length; j++) {
      cell.append('<td>' + sizes[i][j] + '</td>');
      row.append(cell);
   }
}
td{
border:1px solid #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
			
	<table>
		<tbody id="size-rows">	</tbody>
	</table>
1
Mona Coder 16 mars 2019 à 03:58

2 réponses

Meilleure réponse

Vous ajoutez au <td>, à la place, ajoutez le cell et le <td> suivant au row :

var sizes = [
  [52, 16, 140],
  [54, 16, 145]
];
var table = $('#size-rows');
var row, cell;
for (var i = 0; i < sizes.length; i++) {
  row = $('<tr />');
  table.append(row);
  cell = $('<td>Default TD</td>');
  row.append(cell);
  for (var j = 0; j < sizes[i].length; j++) {
    row.append('<td>' + sizes[i][j] + '</td>');
  }
}
td {
  border: 1px solid #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tbody id="size-rows"> </tbody>
</table>
1
MrGeek 16 mars 2019 à 01:09

Voici une solution utilisant la fonction map.

var sizes= [
   [52, 16, 140],
   [54, 16, 145]
];

$('#size-rows').append(
  sizes.map(
    x => `<tr>
            <td>Default TD</td>${x.map(y => `<td>${y}</td>`)}
          </tr>`
          )
 );
td{
border:1px solid #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
			
	<table>
		<tbody id="size-rows">	</tbody>
	</table>
0
Bryan Dellinger 16 mars 2019 à 01:43