Results 1 to 3 of 3

Thread: show table based on for loop in javascript

  1. #1
    Join Date
    Mar 2012
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default show table based on for loop in javascript

    Hello i have select box and one table, in select box i have 1 to 5 numbers if i select 2 from select box the table should be show 2 times.

    Here is my code..

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    $('#Lessons').change(function(){
         var lesNum = $('#Lessons').val();
         for(k=1;k<=lesNum;k++){
             $("#xyz").css("display", "block");
         }
    });
    });
    </script>  
    and my table code is here
    
    <select id="Lessons" name="Lessons">
       <?php for($j=1;$j<=5;$j++):?>
           <option value="<?=$j?>"><?=$j?></option>
       <?php endfor;?>
    </select>
    <div id="xyz" style="display:none;">
     <table>
       //some table data goes here.
     </table>
    </div>
    anyone Help me out .. /uday
    Last edited by keyboard; 10-02-2012 at 10:57 AM. Reason: Format: Code Tags

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    you could try some javascript along these lines:
    Code:
    var table = document.getElementById('the-id-of-your-table');
    var number = document.getElementById('the-id-of-your-select-box').value;
    for(i = 0; i <= number; i++){
        document.write(table);
    }
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    PHP Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#Lessons').change(function(){
             var lesNum = $('#Lessons').val();
             $(".xyz").css("display", "none");
             for(var k=0; k < lesNum; ++k){
                 $(".xyz").eq(k).css("display", "block");
             }
        });
        $('#Lessons').trigger('change');
    });
    </script>  
    </head>
    <body>
    <!-- and my table code is here -->
    Number of Lessons to Show: <select id="Lessons" name="Lessons">
       <?php for($j=1;$j<=5;$j++):?>
           <option value="<?php echo $j;?>"><?php echo $j;?></option>
       <?php endfor; ?>
    </select>
       <?php for($j=1;$j<=5;$j++):?>
    <div class="xyz" style="display:none;">
     <table>
       <tr>
        <td>//some table data for table #<?php echo $j?> goes here.</td>
       </tr>
     </table>
    </div>
       <?php endfor; ?>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Loop through table to get TD value?
    By kawi6rr in forum JavaScript
    Replies: 5
    Last Post: 09-01-2012, 02:23 AM
  2. While Loop in Table
    By onestopplay in forum PHP
    Replies: 4
    Last Post: 07-02-2009, 11:18 PM
  3. Replies: 3
    Last Post: 04-26-2009, 03:10 AM
  4. Replies: 4
    Last Post: 08-21-2007, 05:12 PM

Tags for this Thread

Bookmarks

Posting Permissions

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