Показать/скрыть colspan определенной строки одним нажатием кнопки

Question

У меня проблема, мне нужно показать/скрыть colspan каждого столбца при нажатии ссылки.

То есть у меня много записей, и, когда вы нажимаете на какую-либо конкретную информацию, вам нужно показать эту информацию на colspan, когда нажата другая запись, скройте ранее записанную запись.

Мой HTML код:

<table class="table table-condensed table-bordered table-hover text-center"> 

    <thead> 
     <tr> 
      <th>#</th> 
      <th>Name</th> 
      <th>Price</th> 
      <th>Date</th> 
      <th>Details</th> 
     </tr> 
    </thead> 

    <tbody> 
     <?php foreach ($products as $row): ?> 
      <tr> 
       <td>1</td> 
       <td>Product 1</td> 
       <td>10000</td> 
       <td>Date</td> 
       <td><a href="#" class="show" id="1">Show details</a></td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>Product 2</td> 
       <td>100</td> 
       <td>Date</td> 
       <td><a href="#" class="show" id="2">Show details</a></td> 
      </tr> 
      <tr> 
       <td colspan="5">Details of selected product</td> 
      </tr> 
     <?php endforeach; ?> 
    <tbody> 
</table> 

У меня был этот код, но всегда принес мне первую запись:

$('.show').click(function(){ 
    $(this).parent().parent().next().toggle('slow'); 
    var id = $(this).attr('id'); 
    $('td #colspanid').append(id); //show id 
    return false; 
}); 

Answer 1

Если вы хотите, чтобы определенные строки для переключения, то вы можете использовать eq

jQuery(document).ready(function($){ 
    $('.show').on('click', function(e){ 
     e.preventDefault(); 
     // Put row index in eq 
     $('.table tr').eq(2).toggle(); 
    }) 
}) 

Или, если вы хотите переключить следующий tr, тогда проверьте это jsfiddle, что у меня есть c reated.

Надеюсь, это поможет вам.

Answer 2

Измените функцию щелчка следующим образом.

$('.show').click(function(){ 
var element1=$(this); 
$('.previous').addClass('hide'); 
element1.parent().parent().addClass('previous'); 

    var id = element1.attr('id'); 
    $('td#colspn').text('Details of selected product is :' +id); //show id 
    return false; 
}); 

и добавить CSS:

.hide{ 
display:none; 
} 

Играть ниже HTML для справки.

$('.show').click(function(){ 
 
var element1=$(this); 
 
$('.previous').addClass('hide'); 
 
element1.parent().parent().addClass('previous'); 
 

 
    var id = element1.attr('id'); 
 
    $('td#colspn').text('Details of selected product is :' +id); //show id 
 
    return false; 
 
});

.hide{ 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<table class="table table-condensed table-bordered table-hover text-center"> 
 

 
    <thead> 
 
     <tr> 
 
      <th>#</th> 
 
      <th>Name</th> 
 
      <th>Price</th> 
 
      <th>Date</th> 
 
      <th>Details</th> 
 
     </tr> 
 
    </thead> 
 

 
    <tbody> 
 
     
 
      <tr> 
 
       <td>1</td> 
 
       <td>Product 1</td> 
 
       <td>10000</td> 
 
       <td>Date</td> 
 
       <td><a href="#" class="show" id="1">Show details</a></td> 
 
      </tr> 
 
      <tr> 
 
       <td>2</td> 
 
       <td>Product 2</td> 
 
       <td>100</td> 
 
       <td>Date</td> 
 
       <td><a href="#" class="show" id="2">Show details</a></td> 
 
      </tr> 
 
\t \t \t <tr> 
 
       <td>3</td> 
 
       <td>Product 1</td> 
 
       <td>10000</td> 
 
       <td>Date</td> 
 
       <td><a href="#" class="show" id="3">Show details</a></td> 
 
      </tr> 
 
      <tr> 
 
       <td>4</td> 
 
       <td>Product 2</td> 
 
       <td>100</td> 
 
       <td>Date</td> 
 
       <td><a href="#" class="show" id="4">Show details</a></td> 
 
      </tr> 
 
      <tr> 
 
       <td id="colspn" colspan="5">Details of selected product</td> 
 
      </tr> 
 
     
 
    <tbody> 
 
</table>

Answer 3

Во-первых, определить детали строки, давая им класс.

<tbody> 
    <?php foreach ($products as $row): ?> 
     <tr> 
      <td><?php echo $row[0] ?></td> 
      <td><?php echo $row[1] ?></td> 
      <td><?php echo $row[2] ?></td> 
      <td><?php echo $row[3] ?></td> 
      <td><a href="#" class="show" id="<?php echo $row[0] ?>">Show details</a></td> 
     </tr> 
     <tr class="details"> <!-- <<<<< class="details" --> 
      <td colspan="5">Details of selected product</td> 
     </tr> 
    <?php endforeach; ?> 
<tbody> 

Затем JQuery будет выглядеть следующим образом:

$(function() { 
    $("tr.details").hide().closest("tbody").find("a.show").on('click', function(e) { 
     e.preventDefault();//prevent hyperlink action 
     $("tr.details").slideUp('fast');//hide any previously opened details 
     $(this).closest("tr").next("tr.details").slideDown('fast');//show details for the clicked row 
    }); 
});