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

Posted 2023-02-24

【中文标题】单击按钮显示/隐藏 colspan 特定行

【英文标题】：Show / Hide colspan a specific row at the click of a button

【发布时间】：2015-07-19 00:26:31

【问题描述】：

我有一个问题，我需要在点击链接时显示/隐藏每列的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;
);

【问题讨论】：

在浏览器中发布HTML就好了！！

不知道从哪里开始，我对jQuery的掌握非常基础。

@CristianMezaBustos 那么你应该从学习 jQuery 基础开始。文档、书籍、教程等。

至少有一些记录可以在 jsfiddle 中进行测试

准备好了，很抱歉我在创建问题时犯了错误。问候！！。

【参考方案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
    );
);

【参考方案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>

【讨论】：

朋友你好。感谢您的回答。这就是我想要的，但是当我显示一条记录的信息，然后我点击另一个时，我需要的是从上面点击的记录中隐藏信息，不需要隐藏整行，如果误解了抱歉。我也喜欢在点击的记录下方而不是在表格下方显示信息？我非常感谢您的帮助。问候！！。

【参考方案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。

希望对你有帮助。

【讨论】：

朋友你好。感谢您的回答。就像我在点击的记录下方而不是在表格下方显示信息一样？我非常感谢您的帮助。问候！！。