JQuery активирует только текущую строку.

Question

У меня есть две кнопки для расширения и сжатия подтаблицы в определенном ряду. При нажатии кнопки кнопки «+» - «-» будут изменены. В настоящее время, когда я нажимаю кнопку, появляется правильная строка. Однако все кнопки превращаются в. Могу ли я узнать, как я могу ограничить кнопку только текущей строкой.

Это мой код

$('.expandlink').on('click', function() { 
    var curr_row = $(this).parent().parent('tr').attr('data-id'); 

    $(".subtable").each(function() { //loop through each row 
     if ($("[type='hidden']", this).val() == curr_row) { 
      $(this).show(); 
      $('.expandlink').hide(); 
      $('.shrinklink').show(); 
     } 
    }); 
}); 

$('.shrinklink').on('click', function() { 
    var curr_row = $(this).parent().parent('tr').attr('data-id'); 

    $(".subtable").each(function() { 
     if ($("[type='hidden']", this).val() == curr_row) { 
      $(this).hide(); 
      $('.shrinklink').hide(); 
      $('.expandlink').show(); 
     } 
    }); 
}); 

<tbody> 
<?php $offset = $this->uri->segment(4,0)+1; ?> 
<?php foreach($user as $row): ?> 
<tr data-id="<?php echo $row->id; ?>"> 
<td><?php echo $offset++; ?></td> 
<td><?php echo $row->company; ?></td> 
<td><?php echo $row->firstname; ?></td> 
<td><?php echo $row->lastname; ?></td> 
<td><input type="hidden" class="id" name="id" value="<?php echo $row->id; ? >"/><input type="button" class="expandlink" value="+"/></td> 
<td><input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>"/><input type="button" class="shrinklink" value="-"/></td> 
<td><input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>"/><input type="hidden" name="company" value="<?php echo $row->id; ?>"/><input type="hidden" name="set" value="edit"/><input type="button" class="editlink" value="Edit"/></td> 
<td><input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>"/> <input type="hidden" name="company" value="<?php echo $row->id; ?>"/><input type="hidden" name="set" value="delete"/><input type="button" class="deletelink" value="Delete"/></td> 
    </tr> 
    <tr class="subtable"> 
    <td><input type="hidden" value="<?php echo $row->id; ?>"/></td> 
    <td><?php echo $row->company; ?></td> 
    <td><?php echo $row->firstname; ?></td> 
    <td><?php echo $row->lastname; ?></td> 
</tr> 
<?php endforeach; ?> 
</tbody> 

Answer 1

Найти родительскую строку первой затем указать это детско

$(this).parents("tr").find('.expandlink').hide(); 
$(this).parents("tr").find('.shrinklink').show(); 

Edit: После прочтения структуры таблицы только заметил, что подтаблица находится в другом знаке <tr>

$('.expandlink').on('click', function() { 
    var curr_row = $(this).parent().parent('tr').attr('data-id'); 
    var row = $(this).parents("tr"); 
    $(".subtable").each(function() { //loop through each row 
     if ($("[type='hidden']", this).val() == curr_row) { 
      $(this).show(); 
      row.find('.expandlink').hide(); 
      row.find('.shrinklink').show(); 
     } 
    }); 
});