使用JQuery查找下一个表格行


15

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

感谢

表行

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

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

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

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

  0

难道你不喜欢jQuery吗? 而不是'$(this).find('img')'你可以使用更简洁的'$('img',this)'。 '$'函数接受第二个参数。当它使用jQuery只在'this'的上下文中查找选择器。 23 9月. 082008-09-23 20:30:33

  0

谢谢,我做了这些改变。 23 9月. 082008-09-23 20:37:07

  0

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

+2

我想知道是否有任何性能差异。例如。使用其中一个或另一个会导致不同的代码在jQuery的内部执行? 06 3月. 092009-03-06 19:06:15


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

如果您将每个代码行缩进4个空格,它会显示为“代码”块,显示开始标记等。 23 9月. 082008-09-23 20:28:27


1

尝试......

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

希望这有助于。

  0

谢谢,这是一些有用的代码....但$('。expand img')将影响所有展开类中的图像...我只想在表格单元格中生成一个图像(​​) 23 9月. 082008-09-23 20:36:57


9

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

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

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


3

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

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

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