单击按钮显示/隐藏 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

首先，通过给它们一个类来识别详细信息行。

<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
    });
});

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>
			<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

如果你想切换特定的行，那么你可以使用eq

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

或者，如果您想切换下一个 tr，请查看我创建的 jsfiddle。

希望对你有帮助。