Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old July 17th, 2003, 01:20 AM
Authorized User
 
Join Date: Jun 2003
Location: Quezon City, NCR, Philippines.
Posts: 26
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to vickriz
Default Dynamically create tables

hi to ya all and good day..
i have form which has 4 buttons to display their corresponding tables..

heres my code:
Code:
<form name="myForm" method="post">
    <table width="200" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td><input value="Add Table 10x5" name="Add_10Row" type="button"></td>
        <td><input value="Add Table 20x5" name="Add_20Row" type="button"></td>
        <td><input value="Add Table 30x5" name="Add_30Row" type="button"></td>
        <td><input value="Add Table 40x5" name="Add_40Row" type="button"></td>
      </tr>
      <tr>
        <td colspan="4">
            <p>Load table here:</p>
        </td>
      </tr>
    </table>
</form>
my prob is i dont know how to display this table dynamically. anybody can help me how to obtained with the solution to this prob: if a user clicked on button[only one at a time] they will show the corresponding tables..
table1: 10row and 5columns,
table2: 20row and 5columns,
table3: 30row and 5columns,
table4: 40row and 5columns..

pls help..


Mabuhay!!!
__________________
Mabuhay!!!
Reply With Quote
  #2 (permalink)  
Old July 17th, 2003, 03:34 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Assuming the target browser is fairly modern then the following should work.
Add an onclick handler to the four buttons in the form
onclick="addTable(10, 5);"
where the first parameter is the number of rows, the second the number of columns. For ease of use add an id attribute to the p element where you want the new table, e.g. <p id="paraTable".
The function to add the table would look like this:
Code:
function addTable(RowCount, ColumnCount)
{
  var oPara = document.getElementById("paraTable");
    oPara.innerHTML = "";
    var oTable = document.createElement("table");
    oTable.border="1";
    oTable.width="100%";
    /*Next bit is to the correct way to do it although not strictly necessary*/    
    var oTBody = oTable.appendChild(document.createElement("tbody"));    
    var oRow, oCell;
    for (var i = 0; i < RowCount; i++)
    {
      oRow = oTBody.insertRow();
      for (var j = 0; j < ColumnCount; j++)
      {
        oCell = oRow.insertCell();
        /*If you wish to see borders*/        
        oCell.innerHTML = "&nbsp;";
      }
    }
    oPara.appendChild(oTable);}

--

Joe
Reply With Quote
  #3 (permalink)  
Old July 18th, 2003, 05:27 AM
Authorized User
 
Join Date: Jun 2003
Location: Quezon City, NCR, Philippines.
Posts: 26
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to vickriz
Default

Quote:
quote:Originally posted by joefawcett
 Assuming the target browser is fairly modern then the following should work.
Add an onclick handler to the four buttons in the form
onclick="addTable(10, 5);"
where the first parameter is the number of rows, the second the number of columns. For ease of use add an id attribute to the p element where you want the new table, e.g. <p id="paraTable".
The function to add the table would look like this:
Code:
function addTable(RowCount, ColumnCount)
{
  var oPara = document.getElementById("paraTable");
    oPara.innerHTML = "";
    var oTable = document.createElement("table");
    oTable.border="1";
    oTable.width="100%";
    /*Next bit is to the correct way to do it although not strictly necessary*/    
    var oTBody = oTable.appendChild(document.createElement("tbody"));    
    var oRow, oCell;
    for (var i = 0; i < RowCount; i++)
    {
      oRow = oTBody.insertRow();
      for (var j = 0; j < ColumnCount; j++)
      {
        oCell = oRow.insertCell();
        /*If you wish to see borders*/        
        oCell.innerHTML = "&nbsp;";
      }
    }
    oPara.appendChild(oTable);}

--

Joe
okay.. iL get back soon to check if its working...
thank you so much for help..

Mabuhay!!!
Reply With Quote
  #4 (permalink)  
Old July 18th, 2003, 05:35 AM
Authorized User
 
Join Date: Jun 2003
Location: Quezon City, NCR, Philippines.
Posts: 26
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to vickriz
Default

Hey Joe thanks your code does really work..
and i also try it to create just inside <td.. id="paraTable">

thanks again and more power!!:D

Mabuhay!!!
Reply With Quote
  #5 (permalink)  
Old July 24th, 2003, 03:13 AM
Authorized User
 
Join Date: Jun 2003
Location: Quezon City, NCR, Philippines.
Posts: 26
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to vickriz
Default

hi again joe.. im back..
id like to ask again regarding this topic and the code you give me.

what if id like each column has header.

what will be the changes will made to enhance the code??

Code:
function addTable(RowCount, ColumnCount)
{
  var oPara = document.getElementById("paraTable");
    oPara.innerHTML = "";
    var oTable = document.createElement("table");
    oTable.border="1";
    oTable.width="100%";
    /*Next bit is to the correct way to do it although not strictly necessary*/    
    var oTBody = oTable.appendChild(document.createElement("tbody"));    
    var oRow, oCell;
    for (var i = 0; i < RowCount; i++)
    {
      oRow = oTBody.insertRow();
      for (var j = 0; j < ColumnCount; j++)
      {
        oCell = oRow.insertCell();
        /*If you wish to see borders*/        
        oCell.innerHTML = "&nbsp;";
      }
    }
    oPara.appendChild(oTable);}

HTML:
<form name="myForm" method="post">
    <table width="200" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td><input value="Add Table 10x5" name="Add_10Row" type="button"></td>
        <td><input value="Add Table 20x5" name="Add_20Row" type="button"></td>
        <td><input value="Add Table 30x5" name="Add_30Row" type="button"></td>
        <td><input value="Add Table 40x5" name="Add_40Row" type="button"></td>
      </tr>
      <tr>
        <td colspan="4" id="paraTable">
            <p>Load table here:</p>
        </td>
      </tr>
    </table>
</form>
Mabuhay!!!
Reply With Quote
  #6 (permalink)  
Old July 29th, 2003, 04:08 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Well you would have to modify to be able to pass an arry of header names:
Code:
function addHeadedTable(RowCount, ColumnHeaders)
{
  var oPara = document.getElementById("paraTable");
    oPara.innerHTML = "";
    var oTable = document.createElement("table");
    oTable.border="1";
    oTable.width="100%";
    var oHead = oTable.createTHead();    
    var iColumnCount = ColumnHeaders.length;
    var oRow, oCell;
    oRow = oHead.insertRow();
    for (var i = 0; i < iColumnCount; i++)
    {
      oCell = oRow.insertCell();
      oCell.innerHTML = ColumnHeaders[i];
    } 
    /*Next bit is to the correct way to do it although not strictly necessary*/    
    var oTBody = oTable.appendChild(document.createElement("tbody"));    
    for (var i = 0; i < RowCount; i++)
    {
      oRow = oTBody.insertRow();
      for (var j = 0; j < iColumnCount; j++)
      {
        oCell = oRow.insertCell();
        /*If you wish to see borders*/        
        oCell.innerHTML = "&nbsp;";
      }
    }
    oPara.appendChild(oTable);
}
Then call it like this for a ten row table with five headers named "One" to "Five":
Code:
addHeadedTable(10, ['One', 'Two', 'Three', 'Four', 'Five']);

--

Joe
Reply With Quote
  #7 (permalink)  
Old July 30th, 2003, 09:53 AM
Authorized User
 
Join Date: Jul 2003
Location: Houston, Texas, USA.
Posts: 38
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to nvillare
Default

What is the purpose of the table, if you don't mind me asking?

Also, how would you put information into it or allow someone to put information into it? Just curious.

Nidia
Reply With Quote
  #8 (permalink)  
Old August 5th, 2003, 12:03 AM
Authorized User
 
Join Date: Jun 2003
Location: Quezon City, NCR, Philippines.
Posts: 26
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to vickriz
Default

Quote:
quote:Originally posted by nvillare
 What is the purpose of the table, if you don't mind me asking?

Also, how would you put information into it or allow someone to put information into it? Just curious.

Nidia
hi there nvillare..

well actually my real purpose is letting someone input value. i just forgot to mention about the input textbox that would also dynamically created within the table each cell..

so how can we add that input textbox? any idea??


Mabuhay!!!
Reply With Quote
  #9 (permalink)  
Old August 5th, 2003, 03:00 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Where the code sets the cell's innerHTML,
Code:
oCell = oRow.insertCell();
/*If you wish to see borders*/        
oCell.innerHTML = "&nbsp;";
change to
Code:
oCell = oRow.insertCell();
addTextBox(oCell, "R" + i + "C" + j);
and add this function. You will need to come up with some sort of naming schema if you wish to submit to an HTML form. All text box names should be unique.
Code:
function addTextBox(Parent, Name)
{
  var oText = document.createElement("<input type=\"text\" name=\"" + Name + "\">");
  //If you want an id
  oText.id = oText.name;
  oText.size = 15;
  //More properties if needed
  return Parent.appendChild(oText); 
}

--

Joe
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Print tables dynamically using JasperReport arunv J2EE 1 May 26th, 2008 02:50 AM
create buttons dynamically on webpage rocksbhavesh ASP.NET 1.0 and 1.1 Professional 5 April 19th, 2007 05:20 PM
Creating HTML tables dynamically dotnet cat ASP.NET 1.0 and 1.1 Basics 1 August 25th, 2005 10:58 PM
Dynamically Link MySQL Tables at Runtime Rational Access 0 June 27th, 2004 09:15 PM
How do i dynamically create server components RDosch Classic ASP Components 1 July 31st, 2003 10:59 PM



All times are GMT -4. The time now is 12:53 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.