Repeating table with js?

moojoo · #1 Jul 24th, 2006, 16:54

Having some issues outputting this. Basically how it works is a user enters a number and when the button is clicked it repeats the html code based on the input integer. So since it is not displaying correctly etc I am obviously doing something wrong. javascript is not my strong point so any help would be appreciated. It also randomly generates numbers in the card based on a xml file's contents which works fine. The problem is I lose the formatting and only the first table is displayed although incorrectly.

Code:

Code: Select all

<script type="text/javascript">
document.write('<form name="generate"><input type=button value="Regenerate" onClick="gencards();"> <input type="text" name="printnumber" size="2" maxlength="3" /></form>')
function gencards() {
var burger = document.generate.printnumber.value
burger = burger -1;
i = 0;
while (i <= burger)
{
var str='';
var bingo='';
str='<table id="tbl1" style="BORDER-RIGHT: black thin solid; BORDER-TOP: black thin solid; BORDER-LEFT: black thin solid; BORDER-BOTTOM: black thin solid" cellSpacing="0" cellPadding="0" border="0"><td class="heading">B<\/td><td class="heading">I<\/td><td class="heading">N<\/td><td class="heading">G<\/td><td class="heading">O<\/td><\/table>'
bingo='<script src="MeetingBingo.js" language="JScript"><\/script>'
document.write(str);
document.write(bingo);
i++
}
}
</script>

ukgeoff · #2 Jul 24th, 2006, 21:51

As your terminating value is known at the start of the loop, you should be using the for statement.

for (i=0; i <= burger; i++){

}

You code for printing the table definitions is missing the <tr> element. You are going <table><td>... instead of <table><tr><td>...

moojoo · #3 Jul 24th, 2006, 22:04

Woops heh yup you are right, I will try this tomorrow. Thanks!

moojoo · #4 Jul 25th, 2006, 12:43

Ok so I got this:

Code: Select all

 function gencards() {
var burger = document.generate.printnumber.value
burger = burger -1;
var str='';
var bingo='';
str+='<table id="tbl1" style="BORDER-RIGHT: black thin solid; BORDER-TOP: black thin solid; BORDER-LEFT: black thin solid; BORDER-BOTTOM: black thin solid" cellSpacing="0" cellPadding="0" border="0"><tr><td class="heading">B<\/td><td class="heading">I<\/td><td class="heading">N<\/td><td class="heading">G<\/td><td class="heading">O<\/td><\/tr><\/table>';
bingo+='<script src="MeetingBingo.js" language="JScript"><\/script>';
for (i=0; i <= burger; i++){
document.write(str);
document.write(bingo);
}
}

and the output is this not repeating and not building the table correctly so what am I missing? Wish I was as good at this as xhtml/css lol. If I could do this with PHP I would be fine but unfortunately they want it specifically done with 100% js. So there must be some issue with javascript outputting the html? Perhaps my logic is just screwed up.

ukgeoff · #5 Jul 25th, 2006, 14:15

Quote:

bingo+='<script src="MeetingBingo.js" language="JScript"><\/script>';

Why are you writing the above line after each table line?

Also you are saying the language is JScript and not JavaScript although it probable won't any difference with your code. JScript is IE specific.

If you could do a mock-up of what you are expecting to happen, I might get a better idea.

I don't think JavaScript requires you to escape the forward slashes, e.g., <\/tr> not required, </tr> will do.

moojoo · #6 Jul 25th, 2006, 14:19

Yeah it only needs to work in IE, and you are probably right about the escaping of the tags. That script file is what generates the table. It makes a 5 x 5 table and randomly generates numbers from 1 - 75 in each cell. It needs to repeat as many tables as specified by the user so they can be printed and given out.

ukgeoff · #7 Jul 25th, 2006, 15:52

So if you remove the backslashes and run the program, what is the current situation?

Are you saying the for loop only applies one iteration? If so I would look at the value being picked up for the number of repeats.

moojoo · #8 Jul 25th, 2006, 16:04

Well here it is currently.

1. The table is not getting displayed correctly and only repeats once
2. If I take off the escape on the js file call it breaks
3. If I remove the .js file call it repeats the BINGO table as many times as specified but not the 5x5 numbers grid
4. If I display the exact same code in the HTML document it displays normally but only once

I had it write out the value of genvalue which is the text field and it displayed it correctly.

Code: Select all

 function gencards() {
var genvalue = document.generate.printnumber.value
genvalue = genvalue -1;
var str='';
var bingo='';
str+='<table id="tbl1" style="BORDER-RIGHT: black thin solid; BORDER-TOP: black thin solid; BORDER-LEFT: black thin solid; BORDER-BOTTOM: black thin solid" cellSpacing="0" cellPadding="0" border="0"><tr><td class="heading">B</td><td class="heading">I</td><td class="heading">N</td><td class="heading">G</td><td class="heading">O</td></tr></table>';
bingo+='<script src="MeetingBingo.js" language="javascript"><\/script>';
for (i=0; i <= genvalue; i++){
document.write(str);
document.write(bingo);
}
}

ukgeoff · #9 Jul 25th, 2006, 17:00

Copied your str+=... line into a blank html page, previewed the page and got a black border around the word BINGO, so the code without the '\' is correct and does work.

Are we maybe looking in the wrong area? Could it be something within the MeetingBingo.js file?

I note also that your bingo+=... line still has a '\' in it.

moojoo · #10 Jul 26th, 2006, 14:27

Without escaping the bingo+ line it just cuts the script and outputs the js to the page. The linked .js file is what generates the table. If placed in the HTML it all works fine but only repeats once of course. The repeating bingo box should have 5 cells all with borders which is also not getting output correctly. Maybe this just won't work. I may convince them to let me use PHP or do it in asp.net.

moojoo · #11 Jul 26th, 2006, 15:28

Attached is a shot of how it looks placed in the HTML.

moojoo · #12 Jul 27th, 2006, 13:08

k, almost got it working. I stripped the js code I needed from the external js file and it now repeats as expected. Just a few things to patch up and its good to go. Thanks for all of your help.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
HTML repeating problems??	tails007	Web Page Design	8	Jan 18th, 2008 13:12
repeating background issues.	Therealmatt	Starting Out	4	Sep 20th, 2007 22:54
CSS repeating bg for button	jwalker80	Web Page Design	3	Mar 1st, 2007 21:11
Repeating DIV in Safari	chevy409	Web Page Design	0	Oct 4th, 2005 21:03

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Repeating table with js?