我有一个问题,我需要在单击链接时显示/隐藏每列的 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;
});
最佳答案
如果你想切换特定的行,那么你可以使用 eq
jQuery(document).ready(function($){
$('.show').on('click', function(e){
e.preventDefault();
// Put row index in eq
$('.table tr').eq(2).toggle();
})
})
或者如果你想切换下一个 tr 然后检查这个 jsfiddle我创建的。
希望对你有帮助。
关于javascript - 单击按钮显示/隐藏 colspan 特定行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30117879/