Wrox Programmer Forums
| 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 software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #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!!!
  #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
  #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!!!
  #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!!!
  #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!!!
  #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
  #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
  #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!!!
  #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


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





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.