DOM Table problems

Hello.

My problem is this: I have a table, for which the row and cols number is given by the user.
They contai images. Occasionally a cells picture will be changed. The question I have is this: How to do that? I will be able to compute which cell need to be changed, so indexing will not be a problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">

function createfield()
{
	var hosz_val = document.Jatektermeretek.hosz.value;
	var szel_val = document.Jatektermeretek.szél.value;
	var body= document.getElementsByTagName("body");
	var hely= document.getElementById("game_div");
	var jatekter= document.createElement("table");
	var jatekter_body = document.createElement("tbody");
		for (var j=0; j< hosz_val; j++)
			{
				var sor= document.createElement("tr");
				
				for (var i=0; i< szel_val; i++)
				{
					var cella= document.createElement("td");
					cellaimg= document.createElement("img");
					cellaimg.setAttribute("src","../pics/houdini_pics/field_bgimg.png");
					cella.appendChild(cellaimg);
					sor.appendChild(cella);
				}
				jatekter_body.appendChild(sor);
				jatekter.appendChild(jatekter_body);
			}
			hely.appendChild(jatekter);
			body.appendChild(hely);
			jatekter.setAttribute("border","0");
			jatekter.setAttribute("align", "center");
			jatekter.setAttribute("cellPadding", "0");
			jatekter.setAttribute("cellSpaceing", "0");
			hely.setAttribute("align", "center");
			
						
			var x=document.getElementsByTagName("td");
			alert(x.length);
	}
function numcheck()
{
	var hosz_val = document.Jatektermeretek.hosz.value;
	var szel_val = document.Jatektermeretek.szél.value;
	if (hosz_val < 5 || szel_val < 5)
		{
			alert("A megadott értékek túl alacsonyak, a játék nem kivitelezheto!" + '\n' + "A pályának legalább 5x5 -ösnek kell lennie." + '\n' + "Ne feledje: A több néha jobb");
		}
	else
		{
			createfield();
		}
	}
</script>
</head>
<body>
<div align="center">
  <h1><span class="style1">Els&#337; Javascript beadand&oacute;</span></h1>
  <h2>Houdini Kalapja</h2>
</div>
  <h3 align="left">J&aacute;t&eacute;kszab&aacute;ly:</h3>
  <blockquote><p align="left"><strong>1.:</strong> Adja meg a j&aacute;t&eacute;kt&eacute;r m&eacute;reteit.
        <strong>2.:</strong> A fel, le , jobbra, balra gombokkal a kalapot mozgatva el kell kapni a nyulat.
          <strong>3.:</strong> A kalap mozgat&aacute;s k&ouml;zben forog, a ny&uacute;lra <strong>r&aacute; kell h&uacute;zni</strong> a kalapot! 
          <strong>4.:</strong> A j&aacute;t&eacute;k akkor &eacute;r v&eacute;get sikeresen, ha  r&aacute;tett&uuml;k a ny&uacute;lra a kalapot. </p>
  </blockquote>
  
  
  <form action="" method="get" name="Jatektermeretek" id="meretek">
  	<div align="left">
  	  <blockquote>
  	    <p>Adja meg a játéktér méreteit:
  	      <input name="hosz" type="text" value="" size="4" maxlength="2" />
  	      X
  	      <input name="sz&eacute;l" type="text" value="" size="4" maxlength="2" />
		    &nbsp;&nbsp;<input name="submit" type="button" value="Indul" onclick="numcheck()" />
  	    </p>
		</blockquote>
  	    <div id="game_div" align="center"></div>
  	</div>
  </form>
</body>
</html>

Psyho

Newbie Poster

13 posts since May 2011

Reputation Points: 10

Solved Threads: 0

6 Months Ago

[QUOTE=Psyho;1684320]Hello.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">

function createfield()
{
	var hosz_val = document.Jatektermeretek.hosz.value;
	var szel_val = document.Jatektermeretek.szél.value;
	var body= document.getElementsByTagName("body") [0];
	var hely= document.getElementById("game_div");
	var jatekter= document.createElement("table");
	var jatekter_body = document.createElement("tbody");
		for (var j=0; j< hosz_val; j++)
			{
				var sor= document.createElement("tr");
				
				for (var i=0; i< szel_val; i++)
				{
					var cella= document.createElement("td");
					cellaimg= document.createElement("img");
					cellaimg.setAttribute("src","../pics/houdini_pics/field_bgimg.png");
					cella.appendChild(cellaimg);
					sor.appendChild(cella);
				}
				jatekter_body.appendChild(sor);
				jatekter.appendChild(jatekter_body);
			}
			hely.appendChild(jatekter)
			body.appendChild(hely);
			jatekter.setAttribute("border","0");
			jatekter.setAttribute("align", "center");
			jatekter.setAttribute("cellPadding", "0");
			jatekter.setAttribute("cellSpaceing", "0");
			
						
			var x=document.getElementsByTagName("td");
			alert(x.length);
	}
function numcheck()
{
	var hosz_val = document.Jatektermeretek.hosz.value;
	var szel_val = document.Jatektermeretek.szél.value;
	if (hosz_val < 5 || szel_val < 5)
		{
			alert("A megadott értékek túl alacsonyak, a játék nem kivitelezheto" + '\n' + "Ne feledje: A több néha jobb");
		}
	else
		{
			createfield();
		}
	}
</script>
</head>
<body>
<div align="center">
  <h1><span class="style1">Els&#337; Javascript beadand&oacute;</span></h1>
  <h2>Houdini Kalapja</h2>
</div>
  <h3 align="left">J&aacute;t&eacute;kszab&aacute;ly:</h3>
  <blockquote><p align="left"><strong>1.:</strong> Adja meg a j&aacute;t&eacute;kt&eacute;r m&eacute;reteit.
        <strong>2.:</strong> A fel, le , jobbra, balra gombokkal a kalapot mozgatva el kell kapni a nyulat.
          <strong>3.:</strong> A kalap mozgat&aacute;s k&ouml;zben forog, a ny&uacute;lra <strong>r&aacute; kell h&uacute;zni</strong> a kalapot! 
          <strong>4.:</strong> A j&aacute;t&eacute;k akkor &eacute;r v&eacute;get sikeresen, ha  r&aacute;tett&uuml;k a ny&uacute;lra a kalapot. </p>
  </blockquote>
  
  
  <form action="" method="get" name="Jatektermeretek" id="meretek">
  	<div align="left">
  	  <blockquote>
  	    <p>Adja meg a játéktér méreteit:
  	      <input name="hosz" type="text" value="0" size="4" maxlength="2" />
  	      X
  	      <input name="sz&eacute;l" type="text" value="0" size="4" maxlength="2" />
		    &nbsp;&nbsp;<input name="submit" type="button" value="Indul" onclick="numcheck()" />
  	    </p>
		</blockquote>
  	    <div id="game_div" align="center"></div>
  	</div>
  </form>
</body>
</html>

Psyho

Newbie Poster

13 posts since May 2011

Reputation Points: 10

Solved Threads: 0

6 Months Ago

Show Comments

Tables are much easier to build with 'insertRow()" and "insertCell()". (Yeah, I know. You've done it the hard way and it finally worked! Bravo. But please edit it back to the easy way, now that you know.)

As you create your rows/cells, also create a map, a 2d array where each element is an array (one per row) and each element in each element is an array (one per cell). Something like this pseudo-code:

... Start table
var map = [];
for ( row = top to bottom ) {
    aRow = insertRow( ..
    for ( cell = left to right ) {
        aCell = insertCell( ...
        map[ aRow ][ aCell ] = cell;
    }
}

Then use your map. It may be easier in your app to store references to the images in the map.

MartinRinehart

Junior Poster in Training

97 posts since Jun 2010

Reputation Points: 11

Solved Threads: 10

This article has been dead for over three months

You