jquery - 使用 jQuery 查找下一个表格行

Question

使用 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>

Answer 1

您不需要显示和隐藏标签:

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

编辑:好的，我添加了更改图像的代码。这只是一种方法。当隐藏后面的行时，我将一个类作为标记添加到展开属性中，并在显示该行时将其删除。