DOM - dynamiczne tworzenie zawartości strony tabliczka mnożenia

DOM - dynamiczne tworzenie zawartości strony tabliczka mnożenia
M7
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 2
0

Witam, mam problem ze stworzeniem tabliczki mnożenia, która ma być zrobiona za pomocą dynamicznego tworzenia zawartości strony w js, ogólnie to co mam teraz wygląda tak:

Kopiuj
<!DOCTYPE html>
<html>
<head>
	<title>Tabliczka mnożenia</title>
	<meta charset="UTF-8"/>
	<style>
	th {background-color:orange;}
	td {background-color:lightgrey;}
	table, tr, td {border: 1px solid grey;}
	</style>
<head>
<body>
	<table id="tabelka"></table>
	<script>
	var tab = document.getElementById('tabelka');
	
	for (var y=1; y<=10; y++) {
		var tr = document.creatElement('tr');
		for (var x=1; x<=10; x++) {
			var tekst = document.createTextNode(x*y);
			var tekst1 = document.createTextNode(y);
			if (y == 1 || x==1) {
				var elem = document.createElement('th';)
				
			else elem = document.creatElement('th');
			elem.appendChild(tekst);
			tr.appendChild(elem);
				
						}
			tr.appendChild(ele);
		}
	tab.appendChild(tr)
			
	</script>
</body>


</html>

Męczę się już nad tym 2 dni. Nie potrafię powiedzieć czego brakuje, a gdzie mam błąd. Ma być to tabliczka mnożenia, która wykorzystuje "table". Pierwszy wiersz od górnej lewej strony poziomy i pionowy ma mieć pomarańczowy kolor tła, reszta szary kolor tła. Proszę o pomoc.

Manna5
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Kraków
  • Postów: 667
3

Było trochę błędów składni.
Poprawiony kod:

Kopiuj
<!DOCTYPE html>
<html>
<head>
    <title>Tabliczka mnożenia</title>
    <meta charset="UTF-8"/>
    <style>
    th {background-color:orange;}
    td {background-color:lightgrey;}
    table, tr, td {border: 1px solid grey;}
    </style>
<head>
<body>
    <table id="tabelka"></table>
    <script>
    var tab = document.getElementById('tabelka');

    for (var y=1; y<=10; y++) {
        var tr = document.createElement('tr');
        for (var x=1; x<=10; x++) {
            var tekst = document.createTextNode(x*y);
            var tekst1 = document.createTextNode(y);
            if (y == 1 || x==1) {
                var elem = document.createElement('th');

            }else elem = document.createElement('td');
            elem.appendChild(tekst);
            tr.appendChild(elem);
        }
    tab.appendChild(tr)
  }
    </script>
</body>

</html>

Mam nadzieję że teraz zadziała.

M7
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 2
0

Jejku w końcu działa, normalnie zaraz zacznę płakać... tak długo się z tym męczyłem. Dzięki wielkie Manna5 za poprawienie i złoty za rade wziąłem sobie do serca i od razu pobrałem Atom.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.