---
title: "dynamisk tabell (appendChild)"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/161933-dynamisk-tabell-appendchild"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "sara26"
published: "2007-06-25T19:48:37.000Z"
updated: "2007-08-22T12:30:44.000Z"
replies: 12
views: 1060
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/161933-dynamisk-tabell-appendchild"
---

# dynamisk tabell (appendChild)

## #1 — sara26, 2007-06-25T19:48Z

\--

Permalänk: https://www.webforum.nu/p/161933

## #2 — zcorpan, 2007-06-25T21:56Z

Hmm, är width/height antal celler i x/y-led?

Permalänk: https://www.webforum.nu/p/1996180

## #3 — zcorpan, 2007-06-25T22:37Z

Om ja kan man göra tex såhär:

```
<form onsubmit="newgame(x.value, y.value); return false">
 <p><label>X: <input name="x" type="number" value="10"></label></p>
 <p><label>Y: <input name="y" type="number" value="10"></label></p>
 <p><input type="submit" value="Skapa spel"></p>
</form>

<div id="game"></div>

<script>
 var game = document.getElementById("game");

 function newgame(x, y) {
   game.innerHTML = "<table><tbody><tr><td>X</td></tr></tbody></table>";
   var tbody = game.firstChild.firstChild;
   var row = tbody.firstChild;
   var cell = row.firstChild;
   for (var i = 1; i < x; ++i)
     row.appendChild(cell.cloneNode(true));
   for (var j = 1; j < y; ++j)
     tbody.appendChild(row.cloneNode(true));
 }
</script>
```

Välkommen till wF förresten!   :bire

Permalänk: https://www.webforum.nu/p/1996192

## #4 — sara26, 2007-06-26T06:57Z

\--

Permalänk: https://www.webforum.nu/p/1996216

## #5 — zcorpan, 2007-06-26T11:39Z

I koden jag skrev ovan anropas funktionen när man skickar formuläret (onsubmit=...). Textrutornas värden skickas som parametrar i anropet (x.value, y.value).

Själva funktionen sen ersätter allt i "game"-diven med en 1x1-tabell (innerHTML = ...). Sen kopierar den cellen tills det finns lika många som x-parametern. Sen kopierar den raden tills det finns lika många som y-parametern.

And that, as they say, is all there is to it. :)

Permalänk: https://www.webforum.nu/p/1996283

## #6 — sara26, 2007-06-26T12:04Z

\--

Permalänk: https://www.webforum.nu/p/1996291

## #7 — zcorpan, 2007-06-26T13:21Z

Aha.

```
<div id="controls"></div>
<div id="game"></div>
```

```
function newgame(x, y) {
  var game = document.getElementById("game");
  game.innerHTML = "<table><tbody><tr><td>X</td></tr></tbody></table>";
  var tbody = game.firstChild.firstChild;
  var row = tbody.firstChild;
  var cell = row.firstChild;
  for (var i = 1; i < x; ++i)
    row.appendChild(cell.cloneNode(true));
  for (var j = 1; j < y; ++j)
    tbody.appendChild(row.cloneNode(true));
}

window.onload = function() {
  var controls = document.getElementById("controls");
  controls.innerHTML = '<form onsubmit="newgame(x.value, y.value); return false">\
                         <p><label>X: <input name="x" type="number" value="10"><\/label><\/p>\
                         <p><label>Y: <input name="y" type="number" value="10"><\/label><\/p>\
                         <p><input type="submit" value="Skapa spel"><\/p>\
                        <\/form>';
}
```

Permalänk: https://www.webforum.nu/p/1996306

## #8 — sara26, 2007-06-27T10:36Z

\--

Permalänk: https://www.webforum.nu/p/1996483

## #9 — colione, 2007-06-27T20:58Z

Jag valde en annan väg att lösa det:

```
<!doctype html>
<script>
var elems;

function newGame() {
	clearGame();

	elems = new Array();

	var height = document.getElementById('givenheight').value;

	var width = document.getElementById('givenwidth').value;

	var table = document.createElement("table");

	table.id = "theTable";

	table.cellspacing = 0;

	table.cellpadding = 10;

	for (i=0; i<height; i++) {

		elems[i] = new Array();

		var tr = document.createElement("tr");

		tr.id = "tr" + i;

		for (j=0; j<width; j++) {

			var id = "elementX" + i + "Y" + j;

			var td = document.createElement("td");

			td.id = id;

			td.height = 25;

			td.width = 25;

			td.style.border = 'solid 1px black';

			td.style.backgroundColor = 'white';

			

			td.setAttribute("onclick", "javascript:flip(" + j + ", " + i + ");");

			tr.appendChild(td);

			elems[i][j] = id;

		}

		table.appendChild(tr);

	}

	document.getElementById('game').appendChild(table);
	randomBlacks();

}

function randomBlacks() {
	for (i=0; i<elems.length; i++) {

		for (j=0; j<elems[0].length; j++) {

	document.getElementById(elems[i][j]).style.backgroundColor= (Math.floor(Math.random() * 2)>0)?"white":"black";
				}

		}
	verifyResult(false);	

	}

	

function clearGame() {

	var game = document.getElementById("game");

		while (game.childNodes.length > 0)

			game.removeChild(game.childNodes[0]);

}

function HWcontrol() {

		var Wcontrol = document.myForm.givenwidth.value;

		var Hcontrol = document.myForm.givenheight.value;

		if(!(/^\d+$/.test(Wcontrol))) {

			alert("Fältet Bredd får endast innehålla siffror (dock inga negativa)!");

			return false;

		}

		else

		if(!(/^\d+$/.test(Hcontrol))) {

			alert("Fältet Höjd får endast innehålla siffror (dock inga negativa)!");

			return false;

		}

		else {

			newGame();

		}

	}

function flip(x, y) {

	var clickedElem = document.getElementById(elems[y][x]);

	clickedElem.style.backgroundColor = clickedElem.style.backgroundColor == 'white' ? 'black' : 'white';

	if (x > 0) {

		var leftElem = document.getElementById(elems[y][x-1]);

		leftElem.style.backgroundColor = leftElem.style.backgroundColor == 'white' ? 'black' : 'white';

	}

	if (y > 0) {

		var upperElem = document.getElementById(elems[y-1][x]);

		upperElem.style.backgroundColor = upperElem.style.backgroundColor == 'white' ? 'black' : 'white';

	}

	if (y < elems.length-1) {

		var lowerElem = document.getElementById(elems[y+1][x]);

		lowerElem.style.backgroundColor = lowerElem.style.backgroundColor == 'white' ? 'black' : 'white';

	}

	if (x < elems[0].length-1) {

		var rightElem = document.getElementById(elems[y][x+1]);

		rightElem.style.backgroundColor = rightElem.style.backgroundColor == 'white' ? 'black' : 'white';

	}

	verifyResult(true);

}

function verifyResult(clicked) {

	var total = elems.length * elems[0].length;

	var black = 0;	

	for (i=0; i<elems.length; i++) {

		for (j=0; j<elems[0].length; j++) {

			if (document.getElementById(elems[i][j]).style.backgroundColor == 'black') {

				black++;

			}

		}

	}

	if (black == total) {

		if (clicked) {
			alert("GRATTIS! Du klarade det!");
		} else {
		randomBlacks()	
		}

	}

}

function createForm() {

	var form = document.createElement("form");

	form.setAttribute("name","myForm");

	form.setAttribute("id","myForm");

	var t = document.createElement("h1");

	t.innerHTML = 'Lightsout';

	var formTextW=document.createTextNode('Bredd: '); // - Definiera text till textrutan Höjd

	var w = document.createElement("input");

	w.type = "text";

	w.id = "givenwidth";

	w.value = "10";

	

	var formTextH=document.createTextNode('Höjd: '); // - Definiera text till textrutan

	var h = document.createElement("input");

	h.type = "text";

	h.id = "givenheight";

	h.value = "10";

	var b = document.createElement("input");

	b.type = "button";

	b.value = "Skapa spel";

	b.setAttribute("onclick", "javascript:HWcontrol();");

	form.appendChild(t);

	form.appendChild(formTextW);

	form.appendChild(document.createElement('br')); // -  Ett radbryte 

	form.appendChild(w);

	form.appendChild(document.createElement('br')); // -  Ett radbryte

	form.appendChild(formTextH);

	form.appendChild(document.createElement('br')); // -  Ett radbryte 

	form.appendChild(h);

	form.appendChild(document.createElement('p')); // -  Ett radbryte 

	form.appendChild(b);

	form.appendChild(document.createElement("hr"));

	document.getElementById('controls').appendChild(form);

}

function loadMeWhenPageLoads() {

	createForm();

}

window.onload = loadMeWhenPageLoads;
</script>
<div id="controls" />
<div id="game" />
```

Vilket innebär att när spelplanen är skapad så går jag igenom den och slumpar varje rutas bakgrundsfärg, jag har även lagt till en variabel som heter clicked i verifyResult. Denna skickas med antingen som true eller false. När funktionen randomblacks körs kommer den som false vilket innebär att den kör funktionen randomblacks igen. kommer den därifrån via flip-funktionen blir clicked true.

Jag ändrade även din koll efter positiva siffror, den blev lite kortare.. ;)

Permalänk: https://www.webforum.nu/p/1996657

## #10 — sara26, 2007-06-28T07:19Z

\--

Permalänk: https://www.webforum.nu/p/1996718

## #11 — colione, 2007-06-28T07:22Z

Ooops, tänkte inte så långt... :e  :r 
Men det var en fin tanke ivf. Får återkomma senare... :)

Permalänk: https://www.webforum.nu/p/1996719

## #12 — colione, 2007-06-28T08:00Z

Nu så:

```
<!doctype html>
<script>
var elems;

function newGame() {
	clearGame();

	elems = new Array();

	var height = document.getElementById('givenheight').value;

	var width = document.getElementById('givenwidth').value;

	var table = document.createElement("table");

	table.id = "theTable";

	table.cellspacing = 0;

	table.cellpadding = 10;

	for (i=0; i<height; i++) {

		elems[i] = new Array();

		var tr = document.createElement("tr");

		tr.id = "tr" + i;

		for (j=0; j<width; j++) {

			var id = "elementX" + i + "Y" + j;

			var td = document.createElement("td");

			td.id = id;

			td.height = 25;

			td.width = 25;

			td.style.border = 'solid 1px black';

			td.style.backgroundColor = 'white';

			

			td.setAttribute("onclick", "javascript:flip(" + j + ", " + i + ", "+true+");");

			tr.appendChild(td);

			elems[i][j] = id;

		}

		table.appendChild(tr);

	}

	document.getElementById('game').appendChild(table);
	randomBlacks();

}

function randomBlacks(){ 
	x=elems.length;
	y=elems[0].length;
	len=((x+y)/2)+10;
	for(z=0;z<len;z++) {
		flip(Math.floor(Math.random() * (y)), Math.floor(Math.random() * (x)), false);
		}
	verifyResult(false);	
	}

	

function clearGame() {

	var game = document.getElementById("game");

		while (game.childNodes.length > 0)

			game.removeChild(game.childNodes[0]);

}

function HWcontrol() {

		var Wcontrol = document.myForm.givenwidth.value;

		var Hcontrol = document.myForm.givenheight.value;

		if(!(/^\d+$/.test(Wcontrol))) {

			alert("Fältet Bredd får endast innehålla siffror (dock inga negativa)!");

			return false;

		}

		else

		if(!(/^\d+$/.test(Hcontrol))) {

			alert("Fältet Höjd får endast innehålla siffror (dock inga negativa)!");

			return false;

		}

		else {

			newGame();

		}

	}

function flip(x, y, clicked) {

	var clickedElem = document.getElementById(elems[y][x]);

	clickedElem.style.backgroundColor = clickedElem.style.backgroundColor == 'white' ? 'black' : 'white';

	if (x > 0) {

		var leftElem = document.getElementById(elems[y][x-1]);

		leftElem.style.backgroundColor = leftElem.style.backgroundColor == 'white' ? 'black' : 'white';

	}

	if (y > 0) {

		var upperElem = document.getElementById(elems[y-1][x]);

		upperElem.style.backgroundColor = upperElem.style.backgroundColor == 'white' ? 'black' : 'white';

	}

	if (y < elems.length-1) {

		var lowerElem = document.getElementById(elems[y+1][x]);

		lowerElem.style.backgroundColor = lowerElem.style.backgroundColor == 'white' ? 'black' : 'white';

	}

	if (x < elems[0].length-1) {

		var rightElem = document.getElementById(elems[y][x+1]);

		rightElem.style.backgroundColor = rightElem.style.backgroundColor == 'white' ? 'black' : 'white';

	}

	verifyResult(clicked);

}

function verifyResult(clicked) {

	var total = elems.length * elems[0].length;

	var black = 0;	

	for (i=0; i<elems.length; i++) {

		for (j=0; j<elems[0].length; j++) {

			if (document.getElementById(elems[i][j]).style.backgroundColor == 'black') {

				black++;

			}

		}

	}

	if (black == total) {

		if (clicked) {
			alert("GRATTIS! Du klarade det!");
		} else {
		randomBlacks()	
		}

	}

}

function createForm() {

	var form = document.createElement("form");

	form.setAttribute("name","myForm");

	form.setAttribute("id","myForm");

	var t = document.createElement("h1");

	t.innerHTML = 'Lightsout';

	var formTextW=document.createTextNode('Bredd: '); // - Definiera text till textrutan Höjd

	var w = document.createElement("input");

	w.type = "text";

	w.id = "givenwidth";

	w.value = "10";

	

	var formTextH=document.createTextNode('Höjd: '); // - Definiera text till textrutan

	var h = document.createElement("input");

	h.type = "text";

	h.id = "givenheight";

	h.value = "10";

	var b = document.createElement("input");

	b.type = "button";

	b.value = "Skapa spel";

	b.setAttribute("onclick", "javascript:HWcontrol();");

	form.appendChild(t);

	form.appendChild(formTextW);

	form.appendChild(document.createElement('br')); // -  Ett radbryte 

	form.appendChild(w);

	form.appendChild(document.createElement('br')); // -  Ett radbryte

	form.appendChild(formTextH);

	form.appendChild(document.createElement('br')); // -  Ett radbryte 

	form.appendChild(h);

	form.appendChild(document.createElement('p')); // -  Ett radbryte 

	form.appendChild(b);

	form.appendChild(document.createElement("hr"));

	document.getElementById('controls').appendChild(form);

}

function loadMeWhenPageLoads() {

	createForm();

}

window.onload = loadMeWhenPageLoads;
</script>
<div id="controls"></div>
<div id="game"></div>
```

Permalänk: https://www.webforum.nu/p/1996727

## #13 — dreas, 2007-08-22T12:30Z

Varför tar du bort dina inlägg sara26? Det blir VÄLDIGT irriterande att läsa en tråd på detta sätt.

/Andreas

Permalänk: https://www.webforum.nu/p/2018941

---

Tråden på webben: https://www.webforum.nu/amne/javascript/161933-dynamisk-tabell-appendchild
