How to make table through javascript
Moderator: General Moderators
How to make table through javascript
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
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
- Gavin.Monroe
- Forum Newbie
- Posts: 12
- Joined: Mon Sep 04, 2006 12:09 am
- Location: Chesapeake, VA
- Contact:
First, you need to make sure you HTML is set up correctly. For example:
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:
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!
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>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>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.
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
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
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.
waiting for a response sooon
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>- Gavin.Monroe
- Forum Newbie
- Posts: 12
- Joined: Mon Sep 04, 2006 12:09 am
- Location: Chesapeake, VA
- Contact:
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
- Gavin.Monroe
- Forum Newbie
- Posts: 12
- Joined: Mon Sep 04, 2006 12:09 am
- Location: Chesapeake, VA
- Contact:
- CoderGoblin
- DevNet Resident
- Posts: 1425
- Joined: Tue Mar 16, 2004 10:03 am
- Location: Aachen, Germany
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
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