使用 jQuery 查找下一个表格行
Posted
技术标签:
【中文标题】使用 jQuery 查找下一个表格行【英文标题】:Using jQuery to find the next table row 【发布时间】:2010-09-12 12:15:53 【问题描述】:使用 jQuery,如何将单击事件绑定到将更改 image src
的表格单元格(下方为 class="expand"
)(位于单击的单元格中 - 原始文件为 plus.gif,与减号交替显示。 gif) 和 hide/show
紧接其下方的行,取决于该行是否具有 hide
类。 (如果它有一个“隐藏”类则显示它,如果它没有一个“隐藏”类则隐藏)。我可以灵活地更改标记中的 id 和类。
谢谢
表格行
<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>
【问题讨论】:
【参考方案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();
);
);
edit:好的,我添加了更改图像的代码。这只是一种方法。当后面的行被隐藏时,我将一个类作为标签添加到 expand 属性中,并在显示该行时将其删除。
【讨论】:
你不喜欢 jQuery 吗?您可以使用更简洁的$('img', this)
而不是$(this).find('img')
。 $
函数接受第二个参数。使用时,jQuery 只在this
的上下文中查找选择器。
这对我来说有点倒退。其他所有内容从左到右阅读,而使用该语法您必须从右到左阅读。它们都具有完全相同的效果,因此我通常会尝试坚持 $(this).find(...) 样式。
我想知道是否有任何性能差异。例如。使用其中一种会导致在 jQuery 内部执行不同的代码吗?【参考方案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();
);
);
...并且没有多余的类。
【讨论】:
【参考方案3】:我最近不得不解决这个问题,但我的涉及一些嵌套表,所以我需要一个更具体、更安全的 javascript 版本。我的情况有点不同,因为我有一个 td 的内容并想切换下一个 TR,但概念保持不变。
$(document).ready(function()
$('.expandButton').click(function()
$(this).closest('tr').next('tr.expandable').fadeToggle();
);
);
Closest 获取最近的 TR,在本例中为第一个父级。如果你想变得非常具体,你可以在那里添加一个 CSS 类。然后我指定使用可扩展类获取下一个 TR,即此按钮的目标。然后我只是fadeToggle()
来切换它是否显示。指定选择器确实有助于缩小处理范围。
【讨论】:
【参考方案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');
希望这会有所帮助。
【讨论】:
谢谢,这是一些有用的代码....但是 $('.expand img') 会影响扩展类中的所有图像...我只想影响表格单元格 (这是在 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;");
【讨论】:
如果您将每个代码行缩进 4 个空格,它将显示为“代码”块,显示开始标签等。以上是关于使用 jQuery 查找下一个表格行的主要内容,如果未能解决你的问题,请参考以下文章