How to make table through javascript

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
eshban
Forum Contributor
Posts: 184
Joined: Mon Sep 05, 2005 1:38 am

How to make table through javascript

Post 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
User avatar
Gavin.Monroe
Forum Newbie
Posts: 12
Joined: Mon Sep 04, 2006 12:09 am
Location: Chesapeake, VA
Contact:

Post 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!
Last edited by Gavin.Monroe on Mon Sep 04, 2006 1:26 am, edited 1 time in total.
eshban
Forum Contributor
Posts: 184
Joined: Mon Sep 05, 2005 1:38 am

Post 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
eshban
Forum Contributor
Posts: 184
Joined: Mon Sep 05, 2005 1:38 am

Post 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
eshban
Forum Contributor
Posts: 184
Joined: Mon Sep 05, 2005 1:38 am

Post by eshban »

ohhh, i do it :) . will ask you in future if i need any help. thanks
User avatar
Gavin.Monroe
Forum Newbie
Posts: 12
Joined: Mon Sep 04, 2006 12:09 am
Location: Chesapeake, VA
Contact:

Post by Gavin.Monroe »

You're welcome. I'm glad to hear that everything is working for you now.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
User avatar
Gavin.Monroe
Forum Newbie
Posts: 12
Joined: Mon Sep 04, 2006 12:09 am
Location: Chesapeake, VA
Contact:

Post by Gavin.Monroe »

I agree, but we've got to start out small, no?
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post 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
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

Moved to clientside.
Post Reply