[RESOLVED] Help with content changing in Table

**PSyho** · 11-04-2011 06:06 AM

Hello all.

I have a problem with changing the pictures in cells in the javascript created table.
I need to change the picture in specific cells. Like: 5.th row, 4.th cell and so on.

Here is the code:

Code:

<!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">
<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 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);
			}
			body.appendChild(jatekter);
			jatekter.setAttribute("border","0");
			jatekter.setAttribute("align", "center");
			jatekter.setAttribute("cellPadding", "0");
			jatekter.setAttribute("celling", "0");
			
			var x=document.getElementsByTagName("td");
			alert(x.length);
			x[21].setAttribute("")
	}
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>
<div align="center">
  <h1><span class="style1">Első 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>
  	    <p>&nbsp;</p>
  	  </blockquote>
  	</div>
  </form>
</html>

**Tilea** · 11-04-2011 02:42 PM

Do you want to change the image depending on a certain action from the user?

**007Julien** · 11-05-2011 08:04 AM

Take care and eliminate accents in names or identifiers...

A document.Jatektermeretek.szél.value; can not give the value of an input of name szél (the $eacute give the é in HTML but not in javascript). Change at first this name with a szel.

Then work with a debugger like Firebug with FireFox or other development error console...

**PSyho** · 11-05-2011 08:45 AM

Thank you for the help, I did just that, and the problem at hand has been dealt with by now.

Now I have a different problem.

The code:

Code:

document.onkeyup = alert("megnyomtad");

Doesn't work for me. For one as soon as I open the page it shows the alert box, and it doesn't work again. As soon as alertbox is closed, no matter what I do , it doesn't show up again.

Could you help with this too?

**007Julien** · 11-05-2011 10:17 AM

Document.onkeyup wait a function and not an instruction ? Try :

Code:

function lrt(){alert("megnyomtad");}
document.onkeyup = lrt;

// or with an anonymous fonction
document.onkeyup=function(){alert("megnyomtad");}

**PSyho** · 11-05-2011 10:29 AM

Thanks it works, but it reacts when i press ENTER as well (when I want to close alert window).
It isn't bad (filtering will take care of that), but just out of curiosity: why is it so?

Thnks again, you're a great help.

I almost forgot, how to deal with the fact that IE and FF works with it differently?

**007Julien** · 11-05-2011 10:57 AM

Try this

Code:

document.onkeyup = function(e){var k=e?e.which:window.event.keyCode,t=e?e.target:window.event.srcElement;
	if (k==13) return;// for Enter
	alert("The key is "+k);
	// work with other keys and t the target 
}

**PSyho** · 11-05-2011 11:02 AM

Thanks, but what is that

Code:

t=e?e.target:window.event.srcElement;

for?

**PSyho** · 11-05-2011 11:19 AM

Next question( hopefully the last)

I need the innerHTML src attributes of the pictures.

if the src value of image in cell id x is 1.png, then the src value of image in cell id x+1 needs to be 2.png.

And vice versa.

**007Julien** · 11-05-2011 02:07 PM

First question. The argument e (the event object) of the function do not exist with Internet Explorer but is done by window.event.
To determine the key we test e, to keep e.which (if e exist) and window.event.keyCode (if e do not exist). It the same to determine the target (usually the input where the key board is used) t is given by e.target (if e exist) and window.event.srcElement (if not). You can remove this values, if you have not to work with this target.

I do not understand the second question the innerHTML of a cell will give all the tag img and the src attribute of the picture...

Thread: [RESOLVED] Help with content changing in Table

Thread Tools

Display

[RESOLVED] Help with content changing in Table

Thank You

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions