Question

我有这段代码：

<table id="SomeTable">
<tr>
    <td>Rows:</td>
    <td><select name="Rows" id="Rows">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select></td>
</tr>
<tr>
    <td>#1</td>
    <td><input type="text"></td>
</tr>
......
<tr>
    <td>#5</td>
    <td><input type="text"></td>
</tr></table>

是否有可能以某种方式动态显示下拉列表中选择的行数？并使用JQuery在第一行或每行中添加当前数字？

哪种方式最好解决这个问题？是否有可能在移除/添加这些tr时为其设置动画？

/ M

Answer 1

您可以使用:gt()选择器，如下所示：

$("#Rows").change(function() {
  $("#SomeTable tr").show().filter(":gt(" + $(this).val() + ")").hide();
});

它是一个基于0的索引，但是由于你自己有一个额外的行与下拉本身，这是完美的。另一个稍微清洁的选择是.slice()，如下所示：

$("#Rows").change(function() {
  $("#SomeTable tr").show().slice(parseInt($(this).val(), 10)).hide();
});

对于动画，你可以做一些淡入淡出，但特别是动画表行在IE中很讨厌，我会远离它。

Answer 2

$('#Rows').change(function() { 
    alert($(this).val()); 
});

我不确定你的意思，你是否试图根据选择框的值添加n个元素？

动态显示/添加动态

2 个答案: