javascript - 单击按钮显示/隐藏 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我创建的。

希望对你有帮助。