Page 1 of 1

How to make table through javascript

Posted: Mon Sep 04, 2006 12:11 am
by eshban
Hi,

I have a problem. please help me in this regard.

I have a combobox which contain numeric values from 1-7.

i want to generate a table with 2 rows and 4 columns through javascript. Means when a user select numeric value like '3' from a combo box then a page generates '3' tables without refreshing a page. And if a user selects '4' from a combobox then a script generates 4 tables with 2 rows and 4 columns and so on.

kindly guide me that how can i mkae this javascript.

plz help

Posted: Mon Sep 04, 2006 12:44 am
by Gavin.Monroe
First, you need to make sure you HTML is set up correctly. For example:

Code: Select all

<select id="combo1" onchange="javascript:createtables(this.value);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>

<div id="tablediv1">
</div>
The onchange property will cause the createtables function to be called when the user selects a value from the combo box. It is passed the value of the combo box. The div with the id tablediv1 is where the createtables function will create the table(s).

Here is the javascript:

Code: Select all

<script type="text/javascript">
function createtables(num_tables){
    tablediv = document.getElementById('tablediv1');
    tablediv.innerHTML = "";
    for (i=0; i<num_tables; i++){
        tablediv.innerHTML += '<table><tbody><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></tbody></table>';
    }
}
</script>
As you can see, the createtables function is passed the number of tables it will create. It then updates the contents of the tablediv1 div using a for loop.

And that's it! Well the basics anyway. Hope this helped!

Posted: Mon Sep 04, 2006 1:16 am
by eshban
thanks for your reply, your code works well i just add 'border=1' in the table tag, because when i run your script first time, it displays nothing.

I am currently working on this script, as it has more features may be i need your more help. In that case, i will leave my message here .

Thanks again for your help.

Eshban

Posted: Mon Sep 04, 2006 1:32 am
by eshban
I am facing problem again.

Now i have three combo boxes, and i want the same functionality. means when user select a value '3' from first combox box then it will generate 3 tables without refreshing the page,

similarly if the user select vale '4' from combobox then it will generate 4 tables without eliminating the first generated table.

here is my html code.

plz help me in making this script.

Code: Select all

<body>

<table border="1">
	<tr>
		<td>
			Adults
				<select id="combo1" onchange="javascript:createtables_adults(this.value);">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				</select>
		</td>		
				
		<td>
			Youth
				<select id="combo2" onchange="javascript:createtables_adults(this.value);">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				</select>
		</td>		
		
		<td>
			Children
				<select id="combo3" onchange="javascript:createtables(this.value);">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				</select>
		</td>		
	</tr>
</table>
waiting for a response sooon

Posted: Mon Sep 04, 2006 1:40 am
by eshban
ohhh, i do it :) . will ask you in future if i need any help. thanks

Posted: Mon Sep 04, 2006 1:49 am
by Gavin.Monroe
You're welcome. I'm glad to hear that everything is working for you now.

Posted: Mon Sep 04, 2006 3:07 am
by Chris Corbyn
Yikes. Use DOM to do this much cleaner (and faster!). Building strings like that is not very easy to modify and gets messy very quickly.

Posted: Mon Sep 04, 2006 3:22 am
by Gavin.Monroe
I agree, but we've got to start out small, no?

Posted: Mon Sep 04, 2006 3:30 am
by CoderGoblin
I agree that it is probably better to use DOM, it will certainly allow you to be more flexible in the future.

If you need help these were found with "javascript create table" in Google...

Traversing HTML table with Javascript and DOM

How to create DOM tables

Posted: Mon Sep 04, 2006 4:16 am
by onion2k
Moved to clientside.