Dodanie do tabeli w js

pytanie zadane 22 września 2019 w JavaScript przez Młody programista Obywatel (1,200 p.)
edycja 22 września 2019 przez Młody programista

Witam, moim problem jest to, że chciałbym wklepać tabliczkę mnożenia do tabeli, ale nie wiem jak to zrobić. Ma to wyglądać tak :

Oto mój kod:

<table class="table" border="3" cellspacing="0" cellpadding="2">
	<tr >
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr >
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td><td></td>
		<td></td>
		<td></td>
	</tr>
	<tr >
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td><td></td>
		<td></td>
		<td></td>
	</tr>
	<tr >
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td><td></td>
		<td></td>
		<td></td>
	</tr>
	<tr >
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td><td></td>
		<td></td>
		<td></td>
	</tr>
	<tr >
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td><td></td>
		<td></td>
		<td></td>
	</tr>
	<tr >
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td><td></td>
		<td></td>
		<td></td>
	</tr>
	<tr >
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td><td></td>
		<td></td>
		<td></td>
	</tr>
	<tr >
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td><td></td>
		<td></td>
		<td></td>
	</tr>
	<tr >
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td><td></td>
		<td></td>
		<td></td>
	</tr>
</table>

<script type="text/javascript">

	function tabliczka() {
		var tab = document.querySelector("table");
 
	for (i=1; i<=10; i++)
		{
			document.write( i );
			for (j=1; j<=10; j++)
				{
					if (j != 1) {
					document.write( i*j );
					}
				}
			document.write(i);
		}
		document.write(tab);
	}

tabliczka();
</script>

1 odpowiedź

odpowiedź 22 września 2019 przez Chess Szeryf (76,710 p.)

<table>
  <tbody id="tbody">
    <tr>
      <th>n1</th><th>n2</th><th>n3</th><th>n4</th><th>n5</th>
      <th>n6</th><th>n7</th><th>n8</th><th>n9</th><th>n10</th>
    </tr>
  </tbody>
</table>

const n = 10;

for(let i=1;i<=n;i++) {

  let tr = document.createElement('tr');
  document.getElementById('tbody').appendChild(tr);
  for(let j=1;j<=n;j++) {
    let td = document.createElement('td');
    td.textContent = i*j;
    if((j+i) % 2 == 0) {
      td.style.background = 'yellow';
    } else {
      td.style.background = 'lightgreen';
    }
    tr.appendChild(td);
  }
}