使用JQuery查找下一个表行

使用JQuery，如何将click事件绑定到表单元格（下面，class =“expand”），这将更改图像src（在单击的单元格中 – 原始将是https://stackoverflow.com/questions/123401/using-jquery-to-find-the-next-table-row/plus.gif，与minus.gif交替）并根据该行是否具有“隐藏”类隐藏/显示其下方的行。 （如果它有一个“隐藏”类，则显示它，如果它没有“隐藏”类则隐藏）。 我可以灵活地更改标记中的ID和类。

谢谢

表行

  Data1Data2Data3     Data4Data5Data6  

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

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

Answer 2

没有人对三元运营商有任何爱好？ :)我理解可读性考虑因素，但出于某种原因，我点击它将其写为：

 $(document).ready( function () { $(".expand").click(function() { $("img",this).attr("src", $("img",this) .attr("src")=="minus.gif" ? "plus.gif" : "minus.gif" ); $(this).parent().next().toggle(); }); }); 

……并且没有任何无关的课程。

Answer 3

我最近不得不解决这个问题，但我的涉及一些嵌套表，所以我需要一个更具体，更安全的javascript版本。 我的情况有点不同，因为我有一个td的内容，想要切换下一个TR，但概念保持不变。

 $(document).ready(function() { $('.expandButton').click(function() { $(this).closest('tr').next('tr.expandable').fadeToggle(); }); }); 

最近的TR抓住最近的TR，在这种情况下是第一个父。 如果你想要非常具体，你可以在那里添加一个CSS类。 然后我指定使用可扩展类（此按钮的目标）来获取下一个TR。 然后我只是fadeToggle()它来切换它是否显示。 指定选择器确实有助于缩小它的处理范围。

Answer 4

试试这个…

 //this will bind the click event //put this in a $(document).ready or something $(".expand").click(expand_ClickEvent); //this is your event handler function expand_ClickEvent(){ //get the TR that you want to show/hide var TR = $('.expand').parent().next(); //check its class if (TR.hasClass('hide')){ TR.removeClass('hide'); //remove the hide class TR.addClass('show'); //change it to the show class TR.show(); //show the TR (you can use any jquery animation) //change the image URL //select the expand class and the img in it, then change its src attribute $('.expand img').attr('src', 'minus.gif'); } else { TR.removeClass('show'); //remove the show class TR.addClass('hide'); //change it to the hide class TR.hide(); //hide the TR (you can use any jquery animation) //change the image URL //select the expand class and the img in it, then change its src attribute $('.expand img').attr('src', 'plus.gif'); } } 

希望这可以帮助。

Answer 5

这是在html中设置图像的方式

将onClick事件更改为您自己的JS函数，以便在它们之间切换。

在里面

 ToggleFunction(seeSaveButton){ if(seeSaveButton){ $("#saveButton").attr("disabled", true) .attr("style", "visibility: collapse; display: none;"); $("#saveButtonDisabled").attr("disabled", true) .attr("style", "display: inline;"); } else { $("#saveButton").attr("disabled", false) .attr("style", "display: inline;"); $("#saveButtonDisabled") .attr("disabled", true) .attr("style", "visibility: collapse; display: none;"); } }