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。

希望它对你有所帮助。

Answer 2

像这样修改点击功能。

/app

并添加css：

 $('.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;
});

播放下面的html以供参考。

.hide{
display:none;
}

$('.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;
}

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

单击按钮显示/隐藏colspan特定行

3 个答案: