使用 jQuery 查找下一个表格行

Using jQuery to find the next table row

提问by Jay Corbett

Using jQuery, how do you bind a click event to a table cell (below, class="expand") that will change the image src(which is in the clicked cell - original will be plus.gif, alternating with minus.gif) and hide/showthe row immediately below it based on whether that row has a class of hide. (show it if it has a class of "hide" and hide if it does not have a class of "hide"). I am flexible with changing ids and classes in the markup.

使用 jQuery，你如何将点击事件绑定到一个表格单元格（下面，class="expand"），该单元格将改变image src（在点击的单元格中 - 原始将是 plus.gif，与减号.gif 交替）和hide/show紧接其下方的行基于关于该行是否具有hide. （如果它有一个“隐藏”类，则显示它，如果它没有“隐藏”类，则隐藏它）。我可以灵活地更改标记中的 ID 和类。

Thanks

谢谢

Table rows

表格行

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

回答by dbrien

You don't need the show and hide tags:

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

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

edit: Okay, I added the code for changing the image. That's just one way to do it. I added a class to the expand attribute as a tag when the row that follows is hidden and removed it when the row was shown.

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

回答by Pseudo Masochist

Nobody has any love for the ternary operator? :) I understand readability considerations, but for some reason it clicks for me to write it as:

没有人喜欢三元运算符吗？:) 我理解可读性方面的考虑，但出于某种原因，它点击让我把它写成：

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

...and has the benefit of no extraneous classes.

...并且具有没有无关类的好处。

回答by PCasagrande

I had to solve this problem recently, but mine involved some nested tables, so I needed a more specific, safer version of javascript. My situation was a little different because I had contents of a td and wanted to toggle the next TR, but the concept remains the same.

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

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

Closest grabs the nearest TR, in this case the first parent. You could add a CSS class on there if you want to get extremely specific. Then I specify to grab the next TR with a class of expandable, the target for this button. Then I just fadeToggle()it to toggle whether it is displayed or not. Specifying the selectors really helps narrow down what it will handle.

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

回答by jckeyes

Try this...

尝试这个...

//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');
   }
}

Hope this helps.

希望这可以帮助。

回答by Brad8118

This is how the images are set up in the html

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

<tr>

<td colspan="2" align="center"
<input type="image" src="save.gif" id="saveButton" name="saveButton"
    style="visibility: collapse; display: none" 
     onclick="ToggleFunction(false)"/>

<input type="image" src="saveDisabled.jpg" id="saveButtonDisabled" 
      name="saveButton" style="visibility: collapse; display: inline"
      onclick="ToggleFunction(true)"/>
</td>
</tr>

Change the onClickevent to your own function that's in JS to toggle between them.

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

In the

在里面

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