Jump to content

Need his with making this page work

Random

By Random
in JavaScript

 Share

Recommended Posts

Random Newbie

Random

Posted
Posted

What I am trying to do is to enter a number of row and columns, than have it generate a table with those numbers and a picture each cell. The picture being different in each one in sequence. Like cell 1 has "HorseA1.jpg" and than cell 2 has "HorseA2.jpg", etc. than after #12 start back from the begining. Here's the code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title> Assignment 9</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css"> #div1 { font-family: Eras Bold ITC; color: yellow; font-size : 5em; z-index: 1; }#div2 { font-family: Eras Bold ITC; color: yellow; font-size : 1em; z-index: 1; }#div3 { font-family: Eras Bold ITC; color: yellow; font-size : 1em; z-index: 1; }</style><script language = "javascript" type="text/javascript">function validateit(){ if (isNaN(txtRow.value)) { alert ("Please enter an integer for the number of rows."); txtRow.focus(); return false; } else { if (isNaN(txtCol.value)) { alert ("Please enter an integer for the number of columns."); txtCol.focus(); return false; } else { return true; } }} var ImageCnt; function showImage(){var img; if (ImageCnt < 12) {ImageCnt++}; else {ImageCnt=1;}for (var i = 1; i<=ImageCnt; i=i+1) img = "<img src=\"images\\"+HorseA.value+ImageCnt+".jpg\" height=100>";alert (img); document.getElementById("image").src = img; }function CreateIt(){var rCount; var cCount; var txtStr; if (validateit()) { rCount = parseInt(txtRow.value); cCount = parseInt(txtCol.value); txtStr = "<html>\n<head>\n<title>Assignment 9</title>\n</head>\n<body>"; txtStr = txtStr +"<table border='3'>\n"; for (var i = 1; i<=rCount; i=i+1) { txtStr = txtStr + "<tr>\n"; for (var j = 1; j<=cCount; j=j+1) { txtStr = txtStr + "<td width="120" bgcolor="yellow">\n <div id="image" style="width: 120px;"></div> \n </td>\n"; } txtStr = txtStr + "</tr>\n" ; } txtStr = txtStr+"</table>\n"; txtStr = txtStr +"</body>\n</html>" document.writeln (txtStr); return true; } else { return false } } </script> </head><body bgcolor="blue"><div id="div1" align="center">Generating images in a table dyamically</div><table> <tr> <td width="281"><div id="div3" align="right">The number of columns</div></td> <td width="277"> <p> <input type="text" id="txtCol" value="" /> </p></td> </tr> <tr> <td><div id="div2" align="right">The number of rows </div></td> <td><input type="text" id="txtRow"value="" /></td> </tr> <tr> <td> </td> <td><input type="button" id="btnCreate" onclick="CreateIt()" value="Create the table" /></td> </tr></table></body></html>Any help on this would be great

Link to comment
Share on other sites
Bassam122 Newbie

Bassam122

Posted
Posted

hi,first of all i can't understand why you complecate it that much,why you always add the html,head,title, and body tags to str?!!!!you can do what you want in more simple way:

for(var rowCount=0;rowCount<rcount;rowCount++){documnet.write("<tr>")for(var culomnCount=0;culomnCount<ccount;culomnCount++){document.write("<td>")if(imageCount == 12)imageCount=1;elseimageCount++;document.write("<img src=\"IMAGENAME\"+imageCount+\">") // you may need to make some changesdocument.write("</td>")}//end rowCount loopdocumnet.write("</tr>")}//end culomnCount loop

you may need to change the variable names to match yours and make some changes to <img...> statment.try it.

Link to comment
Share on other sites
pulpfiction Dedicated Member

pulpfiction

Posted
Posted

If its going to be HORSEA1.jpg, HORSEA2.jpg to HORSEA12.jpg.. Try this code.... 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title> Assignment 9</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css"> #div1 {font-family: Eras Bold ITC;color: gray;font-size : 5em;z-index: 1;}#div2 {font-family: Eras Bold ITC;color: gray;font-size : 1em;z-index: 1;}#div3 {font-family: Eras Bold ITC;color: gray;font-size : 1em;z-index: 1;}</style><script language = "javascript" type="text/javascript">function validateit(){ if (isNaN(txtRow.value)){alert ("Please enter an integer for the number of rows.");txtRow.focus();return false;}else { if (isNaN(txtCol.value)){ alert ("Please enter an integer for the number of columns.");txtCol.focus();return false;}else{return true;}}} // Important Variable must be assigned to 1var ImageCnt=1;function showImage(){var imgStr;if (ImageCnt>12)ImageCnt=1;imgStr = "<img src='HorseA" + ImageCnt +".jpg' alt='HorseA" + ImageCnt + "' height=100>";ImageCnt++;return imgStr}function CreateIt(){var rCount; var cCount; var txtStr; if (validateit()){rCount = parseInt(txtRow.value);cCount = parseInt(txtCol.value);txtStr = "<html>\n<head>\n<title>Assignment 9</title>\n</head>\n<body>";txtStr = txtStr +"<table border='3'>\n";for (var i = 1; i<=rCount; i=i+1){ txtStr = txtStr + "<tr>\n";for (var j = 1; j<=cCount; j=j+1){ txtStr = txtStr + "<td width='120' bgcolor='yellow'>"var retret = showImage();txtStr = txtStr + rettxtStr = txtStr + "\n </td>\n";}txtStr = txtStr + "</tr>\n" ;}txtStr = txtStr+"</table>\n";txtStr = txtStr +"</body>\n</html>" document.writeln (txtStr);return true; }else{return false}} </script></head><body bgcolor="white"><div id="div1" align="center">Generating images in a table dyamically</div><table><tr><td width="281"><div id="div3" align="right">The number of columns</div></td><td width="277"><p><input type="text" id="txtCol" value="" /></p></td></tr><tr><td><div id="div2" align="right">The number of rows </div></td><td><input type="text" id="txtRow"value="" /></td></tr><tr><td> </td><td><input type="button" id="btnCreate" onclick="CreateIt()" value="Create the table" /></td></tr></table></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...