show table based on for loop in javascript

**udaybabu** · 10-02-2012, 10:24 AM

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

**bernie1227** · 10-02-2012, 11:02 AM

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);
}

**jscheuer1** · 10-02-2012, 03:11 PM

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>

Thread: show table based on for loop in javascript

Thread Tools

Search Thread

show table based on for loop in javascript

Similar Threads

Loop through table to get TD value?

While Loop in Table

Invoke Function Loop: This script works without a loop or while loop. explain why?

New to CSS. getting rid of a table in a loop.

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions