[英]Toggle table icon with jquery
我在下面有一个表格结构的片段。
<tr>
<td class="center "><a href="#" class="icon-plus-sign"></a></td>
<td>IMG</td>
<td>This is the listings title</td>
<td>This is the listings description</td>
<td>Status</td>
<td>Actions</td>
</tr>
<tr class="extra">
<td colspan="6">
<table cellpadding="5" cellspacing="0" border="0" class="inner-table">
<tbody>
<tr>
<td><b>Current Price</b></td>
<td>$ 34.67</td>
</tr>
<tr>
<td><b>Listing Ends</b></td>
<td>06.11.2013 12:20:47</td>
</tr>
<tr>
<td><b>Extra info</b></td>
<td>And any further details here</td>
</tr>
</tbody>
</table>
</td>
</tr>
我正在使用jquery使用下面的代码隐藏/显示额外的表行。
jQuery(function ($) {
$("#items .center").on('click', function (e) {
e.preventDefault();
if ($(this).parent().next('tr').css('display') == 'none') {
$("#items tr.extra").hide();
$(this).addClass('open').parent().next('tr').show().addClass('highlight');
} else {
$('#items tr.extra').hide();
$(this).removeClass('open');
}
$('#items tr.extra td').css('border-collapse', 'collapse');
});
});
我打算在打开和关闭隐藏的表行时让图标切换。
正如您在小提琴中看到的那样,只有在打开和关闭下一个隐藏行时才会切换图标。
有关示例,请参见http://jsfiddle.net/magmate11/2e2yy/4/ 。
提前致谢。
糊
$("#items td.center").removeClass('open');
后
if ($(this).parent().next('tr').css('display') == 'none') {
$("#items tr.extra").hide();
结果
if ($(this).parent().next('tr').css('display') == 'none') {
$("#items tr.extra").hide();
$("#items td.center").removeClass('open'); // NEEDED LINE
$(this).addClass('open').parent().next('tr').show().addClass('highlight');
} else {
$('#items tr.extra').hide();
$(this).removeClass('open');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.