使用JQuery查找下一个表格行

使用JQuery，如何将点击事件绑定到表格单元格（下面的class =“expand”），它将更改图片src（它位于单击的单元格中 - 原始的be plus.gif，与minus.gif交替），并根据该行是否有一个“hide”类来隐藏/显示紧接着它的下一行。（如果它有一类“隐藏”则显示它，如果它没有“隐藏”类则隐藏）。我很喜欢在标记中更改标识和类。使用JQuery查找下一个表格行

感谢

表行

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

来源

2008-09-23 Jay Corbett

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

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

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

来源

2008-09-23 20:07:41 dbrien

难道你不喜欢jQuery吗？而不是`$（this）.find（'img'）`你可以使用更简洁的`$（'img'，this）`。 `$`函数接受第二个参数。当它使用jQuery只在`this`的上下文中查找选择器。 – Lasar 2008-09-23 20:30:33

谢谢，我做了这些改变。 – dbrien 2008-09-23 20:37:07

，感觉有点落后于我。一切从左到右读，而使用这种语法，你必须从右到左阅读。它们都具有完全相同的效果，所以我通常试图坚持$（this）.find（...）风格。 – nickf 2008-10-20 01:42:46

-2

这就是如何将图像设置在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>

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

来源

2008-09-23 20:08:42 Brad8118

尝试......

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

希望这有助于。

来源

2008-09-23 20:33:12 jckeyes

没有人对三元运算符有任何的爱吗？ :)我了解可读性的考虑因素，但由于某种原因，它点击我写它为：

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

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

来源

2008-09-23 21:00:36

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

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

最靠近的是抓取最近的TR，在这种情况下是第一个父亲。如果你想获得非常具体的信息，你可以在那里添加一个CSS类。然后，我指定要抓取下一个具有可展开类的下一个TR，这个按钮的目标。然后我只需fadeToggle()它切换是否显示。指定选择器确实有助于缩小它将处理的内容。

来源

2012-04-10 12:53:23 PCasagrande

使用JQuery查找下一个表格行

回答

相关问题