JavaScript Tabelle

listiger · 10. Feb. 2017

Hallo zusammen,
ich bin noch recht unerfahren was JS anbelangt.
Mein Problem ist folgendes:
Ich möchte eine Tabelle mit dem Einmaleins erstellen, wobei der Parameter eingegeben werden kann.
Folgender Code habe ich bisher:

Code:

<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
		<title>Einmaleins</title>
	</head>
<body>




	<script type="text/JavaScript">
		
		var zahl = prompt("Bitte Zahl eingeben: ");
		zahl=parseInt(zahl);
		
		for(i=1;i<=zahl;i++) {
			document.getElementById("Tabelle").innerHTML = "<tr>";
				for(j=1;j<=zahl;j++) {
					document.getElementById("Tabelle").innerHTML = "<td>"+i*j+"</td>";
				}
			document.getElementById("Tabelle").innerHTML = "</tr>";
		}
				
			
		</script>
	<table id="Tabelle"></table>

</body>
</html>

Die Tabelle soll z.B. für zahl =10, zehn Reihen, sowie Spalten haben und die verschiedenen Einmaleins ausgeben. Allerdings glaube ich, dass ich das mit dem document.getElementByID noch nicht richtig verstanden habe. Mit "document.write" funktioniert es, ich würde es aber gerne auf diese Art lösen.

Über Hilfe wäre ich sehr dankbar.

Liebe Grüße

miniA4kuser · 10. Feb. 2017

document.write() solltest du auch schnell wieder vergessen!

Zu deinem Problem:
Du führst das Script aus, bevor dein HTML-Element existiert.
Mit document.getElementById("Tabelle").innerHTML = ... überschreibst du ständig das HTML für das Element mit der id Tabelle und deswegen bleibt am Ende nur noch </tr> übrig, was natürlich sinnfrei ist.

Am besten das ganze HTML in einem String speichern und dann den komplette String dem gewünschten Element zuweisen. Dies spart dann auch die zu vielen DOM-Zugriffe:

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
	<title>Einmaleins</title>
	<title>Add attribute to links</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
	<table id="Tabelle">
		<tbody id="TabelleBody"></tbody>
	</table>
	<script>
		var tbodyHTML = '',
			zahl = parseInt(prompt("Bitte Zahl eingeben: "));
		
		for (i = 1; i <= zahl; i = i + 1) {
			tbodyHTML += "<tr>";
				for (j = 1; j <= zahl; j = j + 1) {
					tbodyHTML += "<td>" + (i * j) + "</td>";
				}
			tbodyHTML += "</tr>";
		}
		document.getElementById("TabelleBody").innerHTML = tbodyHTML;
	</script>
</body>
</html>

kkapsner · 11. Feb. 2017

miniA4kuser schrieb:
Am besten das ganze HTML in einem String speichern und dann den komplette String dem gewünschten Element zuweisen. Dies spart dann auch die zu vielen DOM-Zugriffe:

Anders ist das auch gar nicht möglich, da der Browser unvollständiges HTML sonst ergänzen würde und man die <td>s nicht an die richtige Stelle schreiben würde.

PS: Ich würde ja prompt nicht verwenden, da man damit die Seite immer neu laden muss, wenn man einen andere Zahl haben will:

Code:

<!DOCTYPE html>
<html>
<head>
	<title>Einmaleins</title>
</head>
<body>
	Einmaleins für <input type="number" id="number">
	<table id="Tabelle">
		<tbody id="TabelleBody"></tbody>
	</table>
	<script>
		document.getElementById("number").addEventListener("input", function(){
			var zahl = parseInt(this.value, 10);
			var tbodyHTML = '';
			for (var i = 1; i <= zahl; i += 1){
				tbodyHTML += "<tr>";
				for (var j = 1; j <= zahl; j += 1){
					tbodyHTML += "<td>" + (i * j) + "</td>";
				}
				tbodyHTML += "</tr>";
			}
			document.getElementById("TabelleBody").innerHTML = tbodyHTML;
		});
	</script>
</body>
</html>

JavaScript Tabelle

listiger

New member

miniA4kuser

Lounge-Member

kkapsner

Super Moderator