使用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>
答
您不需要的显示和隐藏标签:
$(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();
});
});
编辑:好吧,我加入了代码改变图像。这只是一种方法。我在展开属性时将一个类添加为一个标记,当后面的行被隐藏并在显示该行时将其删除。
答
这就是如何将图像设置在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;");
}
}
答
尝试......
//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');
}
}
希望这有助于。
答
没有人对三元运算符有任何的爱吗? :)我了解可读性的考虑因素,但由于某种原因,它点击我写它为:
$(document).ready(function() {
$(".expand").click(function() {
$("img",this).attr("src",
$("img",this)
.attr("src")=="minus.gif" ? "plus.gif" : "minus.gif"
);
$(this).parent().next().toggle();
});
});
......并有没有无关的类的好处。
答
我最近不得不解决这个问题,但是我涉及到一些嵌套表格,所以我需要一个更具体,更安全的JavaScript版本。我的情况有点不同,因为我有一个td的内容,并希望切换下一个TR,但这个概念保持不变。
$(document).ready(function() {
$('.expandButton').click(function() {
$(this).closest('tr').next('tr.expandable').fadeToggle();
});
});
最靠近的是抓取最近的TR,在这种情况下是第一个父亲。如果你想获得非常具体的信息,你可以在那里添加一个CSS类。然后,我指定要抓取下一个具有可展开类的下一个TR,这个按钮的目标。然后我只需fadeToggle()
它切换是否显示。指定选择器确实有助于缩小它将处理的内容。
难道你不喜欢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