Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Location
    Lahore, Pakistan
    Posts
    150
    Thanks
    2
    Thanked 0 Times in 0 Posts

    how to generate HTML table with 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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    
    <head>
      <title></title>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function Easy(obj,id,clone){
     var tar=document.getElementById(id);
     var clone=document.getElementById(clone).getElementsByTagName('TABLE')[0];
     for (var zxc0=0;zxc0<obj.selectedIndex;zxc0++){
      tar.appendChild(clone.cloneNode(true));
     }
    }
    
    function DOM(obj,id){
     var tar=document.getElementById(id);
     for (var zxc0=0;zxc0<obj.selectedIndex;zxc0++){
      var table=document.createElement('TABLE');
      table.border='1';
      var tbdy=document.createElement('TBODY');
      table.appendChild(tbdy);
      for (var zxc1=0;zxc1<2;zxc1++){
       var tr=document.createElement('TR');
       tbdy.appendChild(tr);
       for (var zxc2=0;zxc2<4;zxc2++){
        var td=document.createElement('TD');
        td.width='100';
        td.appendChild(document.createTextNode(zxc2));
        tr.appendChild(td);
       }
      }
      tar.appendChild(table);
     }
    }
    
    
    
    
    //-->
    </script>
    </head>
    
    <body>
    <select onchange="Easy(this,'target','C1');" >
    <option >Easy Method</option>
    <option >1</option>
    <option >2</option>
    <option >3</option>
    <option >4</option>
    <option >5</option>
    </select>
    <select onchange="DOM(this,'target');" >
    <option >DOM Method</option>
    <option >1</option>
    <option >2</option>
    <option >3</option>
    <option >4</option>
    <option >5</option>
    </select>
    <div id="target" ></div>
    
    <div id="C1" style="position:absolute;visibility:hidden;" >
    <table border="1">
      <tr>
      <td width="100" >1 </td>
      <td width="100" >1 </td>
      <td width="100" >1 </td>
      <td width="100" >1 </td>
      </tr>
      <tr>
      <td >2 </td>
      <td >2 </td>
      <td >2 </td>
      <td >2 </td>
      </tr>
    </div>
    
    </table>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    I have one requirement such that to clone a table.
    The exact requirment is i have one table with 5 rows & 7 columns. Now i want to split the table into two tables in which one table should have 3 & another table should have 2 rows. Is it possible to achieve it in Javascript ?

  • #4
    New Coder
    Join Date
    Sep 2009
    Posts
    12
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Code:

    <script>
    function CloneAndSplit () {
    var tableToClone = document.getElementById ("tableToClone");

    var firstTable = tableToClone.cloneNode (true);
    RemoveRows (firstTable, 3, 4);
    var secondTable = tableToClone.cloneNode (true);
    RemoveRows (secondTable, 0, 2);

    document.body.appendChild (firstTable);
    document.body.appendChild (secondTable);
    }

    function RemoveRows (table, from, to) {
    for (var i=to; i >= from; i--) {
    table.tBodies[0].removeChild (table.tBodies[0].rows[i]);
    }
    }
    </script>
    </head>
    <body>
    <button onclick="CloneAndSplit ();">Clone and split the table</button>
    <br /><br />
    <table id="tableToClone" border="1">
    <tbody>
    <tr>
    <td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td><td>1.5</td><td>1.6</td><td>1.7</td>
    </tr>
    <tr>
    <td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td><td>2.5</td><td>2.6</td><td>2.7</td>
    </tr>
    <tr>
    <td>3.1</td><td>3.2</td><td>3.3</td><td>3.4</td><td>3.5</td><td>3.6</td><td>3.7</td>
    </tr>
    <tr>
    <td>4.1</td><td>4.2</td><td>4.3</td><td>4.4</td><td>4.5</td><td>4.6</td><td>4.7</td>
    </tr>
    <tr>
    <td>5.1</td><td>5.2</td><td>5.3</td><td>5.4</td><td>5.5</td><td>5.6</td><td>5.7</td>
    </tr>
    </tbody>
    </table>
    </body>


    If you need detailed information, maybe the following links can help you:
    cloneNode method, appendChild method, removeChild method.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •