DOM Table problems

Question

Psyho 0 Newbie Poster

12 Years Ago

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.<br />
        <strong>2.:</strong> A fel, le , jobbra, balra gombokkal a kalapot mozgatva el kell kapni a nyulat.<br />
          <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! <br />
          <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>
  <br />
  <br />
  <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>

html-css javascript

2 Contributors
2 Replies
149 Views
10 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by MartinRinehart

MartinRinehart 0 Junior Poster in Training

12 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Psyho 0 Newbie Poster · Answer 1 · 2011-11-04T21:34:07+00:00

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") [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.<br />
        <strong>2.:</strong> A fel, le , jobbra, balra gombokkal a kalapot mozgatva el kell kapni a nyulat.<br />
          <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! <br />
          <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>
  <br />
  <br />
  <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>