使用 jQuery,如何将单击事件绑定(bind)到表格单元格(如下,class="expand"
),该事件将更改image src
(位于单击的单元格 - 原始单元格为 plus.gif,与 minus.gif 交替),并根据该行是否具有 hide
类来隐藏/显示
紧接其下方的行。 (如果它具有“隐藏”类,则显示它;如果它没有“隐藏”类,则隐藏)。我可以灵活地更改标记中的 id 和类。
谢谢
表格行
<tr>
<td class="expand"><img src="plus.gif"/></td>
<td>Data1</td><td>Data2</td><td>Data3</td>
</tr>
<tr class="show hide">
<td> </td>
<td>Data4</td><td>Data5</td><td>Data6</td>
</tr>
最佳答案
您不需要显示和隐藏标签:
$(document).ready(function(){
$('.expand').click(function() {
if( $(this).hasClass('hidden') )
$('img', this).attr("src", "plus.jpg");
else
$('img', this).attr("src", "minus.jpg");
$(this).toggleClass('hidden');
$(this).parent().next().toggle();
});
});
编辑:好的,我添加了更改图像的代码。这只是一种方法。当隐藏后面的行时,我将一个类作为标记添加到展开属性中,并在显示该行时将其删除。
关于jquery - 使用 jQuery 查找下一个表格行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/123401/