webForumDet fria alternativet

dynamisk tabell (appendChild)

12 svar · 1 054 visningar · startad av sara26

sara26Medlem sedan juni 20075 inlägg
#1

--

zcorpanMedlem sedan dec. 20042 269 inlägg
#2

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

zcorpanMedlem sedan dec. 20042 269 inlägg
#3

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

sara26Medlem sedan juni 20075 inlägg
#4

--

zcorpanMedlem sedan dec. 20042 269 inlägg
#5

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. :)

sara26Medlem sedan juni 20075 inlägg
#6

--

zcorpanMedlem sedan dec. 20042 269 inlägg
#7

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>';
}
sara26Medlem sedan juni 20075 inlägg
#8

--

colioneMedlem sedan juni 20013 386 inlägg
#9

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.. ;)

sara26Medlem sedan juni 20075 inlägg
#10

--

colioneMedlem sedan juni 20013 386 inlägg
#11

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

colioneMedlem sedan juni 20013 386 inlägg
#12

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>
dreasMedlem sedan jan. 2004146 inlägg
#13

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

Genererad på 385 ms · cache AV · v20260730165559-full.f96bc7eb