Dynamically create tables

vickriz · July 17th, 2003, 01:20 AM

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!!!

joefawcett · July 17th, 2003, 03:34 AM

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

vickriz · July 18th, 2003, 05:27 AM

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!!!

vickriz · July 18th, 2003, 05:35 AM

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!!!

vickriz · July 24th, 2003, 03:13 AM

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!!!

joefawcett · July 29th, 2003, 04:08 AM

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

nvillare · July 30th, 2003, 09:53 AM

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

vickriz · August 5th, 2003, 12:03 AM

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!!!

joefawcett · August 5th, 2003, 03:00 AM

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