Tabliczka mnożenia

Chciałbym dodać do tabliczki mnożenia tak, aby każde pole tabelki miało tło w losowo wybranym kolorze.

Czy mógłby ktoś pomóc?

<style><!--
th, td {
 border: 1px solid rgba(245, 169, 4, 0.671);
 padding: 10px;
 }
 th {
 background: rgb(240, 236, 6);
 font-weight: thin;
 font-style: sansserif;
 }
--></style>
<div id="obszar"></div>
<p>
<script>// <![CDATA[
const dane = document.getElementById('obszar');
 
 let tt = '<table>';
 
 tt += '<tr><td></td>';
 for (let j=1; j<=100; j++) {
 tt += '<th>(' + j +')</th>';   
 }
 tt += '</tr>';


for (let i=1; i <= 100; i++){
 tt += '<tr><th>(' + i + ')</th>';
 for (let j=1; j<=100; j++) {
 tt += '<td>' + i*j +'</td>';
 }
 tt += '</tr>';
 }
 tt += '</table>';
 dane.innerHTML = tt;
// ]]></script>
</p>

Dwa pytania naprowadzające:

1. czy wiesz, w jaki sposób można ustalić (nieistotne teraz, czy losowo, czy wpisać jakiś kolor z łapy) kolor poszczególnej komórki tabeli?
2. czy rozumiesz, w jaki sposób/kiedy są wstawiane poszczególne komórki do tabelki?

Musisz połączyć razem 4 rzeczy

1. Przykładowo funkcję rgba (oczywiście możesz też wybrać inny format zapisu jak rgb, hsl, hexadecymalny) w CSS, która pozwala stworzyć kolor i nadać mu przezroczystość
   https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgba
   https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
   https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color

2. atrybut style, który pozwala dodać nowy wygląd znacznika np <div style="font-size: 30px;"> z poziomu JavaScriptu
   https://javascript.info/styles-and-classes#element-style

3. funkcję Math.random odpowiedzialną za losowanie liczby
   https://kursjs.pl/kurs/super-podstawy/number-math#random

4. oraz funkcję Math.floor do zaokrąglenia liczby
   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor

to ci zrobi randomową liczbę od 0 do 255:

 Math.floor(Math.random() * 256);

możesz później to wykorzystać do stworzenia stylu. Zakładając, że stworzysz w JS zmienne r, g oraz b, gdzie każda z nich będzie miała wylosowaną liczbę od 0 do 255 to zamiast dodawać samo <td>, to dodajesz wtedy:

`<td style="background:rgb(${r},${g},${b})">`

tak jak tutaj (tylko ja zrobiłem trochę inaczej, bo budowałem elementy przez document.createElement)
https://jsfiddle.net/g2ad6t9z/

problem w tym, że to nie jest czytelne ani trochę.
Lepsza czytelność by była gdyby np. kolory się zmieniały cyklicznie (np. żeby taka szachownica wyszła).
https://jsfiddle.net/y81bzx0d/
chociaż... ta szachownica też nie jest zbyt czytelna.

meazzly_ napisał(a):

for (let i=1; i <= 100; i++){
 tt += '<tr><th>(' + i + ')</th>';
 for (let j=1; j<=100; j++) {
 tt += '<td>' + i*j +'</td>';
 }
 tt += '</tr>';
 }
 tt += '</table>';
 dane.innerHTML = tt;
// ]]></script>
</p>

Nie buduj w taki sposób drzewa. Najlepiej zapomnij w ogóle że istnieje coś takiego jak innerHTML, prosisz się o problemy.

Powinno to wyglądać tak

const table = document.createElement("table");
const tr = document.createElement("tr");
const td = document.createElement("td");

td.innerText = i*j;

tr.addChild(td);
table.addChild(tr);