动态显示/添加

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 时为其设置动画？

/米

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 个元素？