Log in

View Full Version : 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..


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


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