在Javascript中显示基于for循环的div

时间:2012-10-02 06:18:36

标签: javascript html-table

我有选择框和一个表,在选择框中我有1到5个数字如果我从选择框中选择2,则该表应该显示2次。

这是我的代码..

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

我的表格代码在这里:

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

任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:1)

以下是您可以使用的内容:

<强> HTML

<select id="Lessons" name="Lessons">
   <?php for($j=1; $j <= 5; $j++) {
        echo "<option value="$j">$j</option>";
        }
   ?> </select>
<div id="result"></div>

<强>的JavaScript

$(document).ready(function(){
    var table = '<?php echo "<table></table>"; /* Generating the table */ ?>',
        parent = $('#result');
    $('#Lessons').change(function(){
        var lesNum = parseInt($('#Lessons').val(), 10);
        parent.empty();
        for(var k=1;k<=lesNum;k++){
            parent.append(table);
        }
    });
});​

我可以建议你远离全局变量(循环中的k)。 还有一个JSFiddle示例:http://jsfiddle.net/pWLhS/5/