Переключение видимости строк по одному

Question

У меня есть пара таблиц с похожей структурой, подобной этой:

<table>
<tbody>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr> ..etc
    --- The fake button is added here
    <div class="addrow">Add another</div>
</tbody>
</table>

ОБНОВЛЕНИЕ: Все строки имеют одинаковый перетаскиваемый класс.

Поскольку это длинный список, мне нужно переключать строки по одной за раз. Мне просто нужно показать первый ряд, конечно, остальные должны быть переключены.

Действие - когда я нажимаю на динамическую фальшивую кнопку, она показывает строку №. 2, и повторное нажатие покажет еще одну следующую строку.

Это то, что я сделал до сих пор:

$("table#field_fruit_values tr.draggable").not(':first').hide();
$("table#field_vegetables_values tr.draggable").not(':first').hide();


$("body.form table.content-multiple-table tbody").append('<div class="addrow">Add</div>');

$(".addrow").click(function() {
  var  hiddenRow = $(this).prev('tr.draggable');
  $(this).prev(hiddenRow + 1).show();
    //if (hiddenRow + ':last').length) { // <= silly logic
     // $(this).hide();
    //}
});

Кнопка работает только для одного ряда. Должно быть, я сделал что-то не так :)

Когда будет достигнут финал, я также хочу, чтобы кнопка исчезла.

Извините, если этот вопрос звучит глупо.

Любая помощь будет принята с благодарностью.

Спасибо.

Answer 1

Вы можете сделать это немного более сжатым с меньшим количеством обхода DOM как это:

$(".addrow").click(function() {
   var row = $(this).prev("table").find("tr:hidden:first");
   if(row.length) row.show();
   else $(this).hide();
});​

Также измените .append() на .after(), чтобы получить действительный html (<div> в <tbody> недействителен):

$("table.content-multiple-table").after('<div class="addrow">Add</div>');

Answer 2

prev(hiddenRow + 1)

hiddenRow - это объект jQuery.

Насколько я знаю, вы не можете добавить ни одного к этому.

Что вы, вероятно, хотите сделать, это создать класс с именем 'visible'. Каждый раз, когда вы делаете строку видимой, присваивайте ей этот класс. Затем, чтобы найти последнюю видимую строку:

$(this).closest('table').find('tr.visible').filter(':last')