Отображение / добавление <tr>динамически

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 чисел элемента на основе значения поля выбора?