Condition with in for loop

I have number from 0 -100 and i want to create table by js:-

var table = document.getElementById("table");
var tr = document.createElement("tr");
table.appendChild(tr);
for(var i=0;i<=100;i++){
	var td = document.createElement("td");
	 td.innerHTML = i;
	 tr.appendChild(td);
}

by applying above code , we get a table with single table row having 100 td.
but, here i want to apply a condition that on, after every 10 td next td will be appended to another tr.
like…

<table>
<tr>
  <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
<tr>
  <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
</table>

what to do to get table like as above.? please help

You may test inside loop for modulo 10 (i % 10 == 0) then add a new tr.

Please see that you want to append the td to the new tr parent not the initial one.

Happy coding

var table = document.getElementById("table");
var tr = document.createElement("tr");
table.appendChild(tr);
var count = 1;
for (var i = 0; i <= 100; i++) {
	if (count == 10) {
		tr = document.createElement('tr');
		table.appendChild(tr);
		var td = document.createElement('td');
		td.innerHTML = i;
		tr.appendChild(td);
		count = 1;
	}
	else {
		var td = document.createElement('td');
		td.innerHTML = i;
		tr.appendChild(td);
		count++
	}
}

Easiest way from what you’ve already got going I can think of, would just be to introduce a count variable and increment it each step until it hits 10. When it does, assign tr to a new element, append to table, make & append tr and reset count back to 1.

What you basically want is Lodash’s “chunk” function

A naive—and probably suboptimal—implementation would be along the lines of:

function chunk(items, chunkSize = 10) {
  const chunks = [];

  // Using Math.ceil, since 11/10 = 1.1 -- and, because we can't have 1.1 chunks, we need 2 chunks
  const numberOfChunks = Math.ceil(items.length / chunkSize);

  for (let i = 0; i < numberOfChunks; i++) {
    const sliceStart = i * chunkSize;
    const sliceEnd = sliceStart + chunkSize;
    // Create a chunk, then push it to the array of chunks
    chunks.push(items.slice(sliceStart, sliceEnd));
  }

  return chunks;
}

then, for this case, you could use it like:

const testItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

chunk(testItems)
  // transform to an array of table cells, grouped by table rows
  .map(tableRowItems => tableRowItems.map(item => {
    const td = document.createElement('td');
    td.innerHTML = item;
    return td;
  }))
  // transform to an array of table rows, with the table cells
  .map(tableRowItems => {
    const tr = document.createElement('tr');
    tableRowItems.forEach(td => {
      tr.appendChild(td);
    });
    return tr;
  })
  // reduce to a table, with the table rows
  .reduce((table, tableRow) => {
    table.appendChild(tableRow);
    return table;
  }, document.createElement('table'))

This code is a bit clever (with all of the map/reduce, etc.), but it’s split into components, making it easier to reason about – especially if/when you need to refactor it.

NICE. your code is working well but there is an issue that it produce a gap first row’s last column. why??
error

Because I goofed. This isn’t exactly the most optimal way to get the job done.

I think, initializing count to 0 outside the loop instead of 1 (reset to 1 though) should fix it.