[英]Hide table row onclick using jQuery
I have a bunch of table rows such as: 我有一堆表行,例如:
<tr>
<td>cell1</td>
<td>cell2</td>
<td><a href="action.php">cell3</a></td>
</tr>
<tr class="notes_row">
<td colspan="6">
<ul class="message warning no-margin" id="notes_box">
<li>Notes here</li>
</ul>
</td>
</tr>
<tr>
<td>cell1</td>
<td>cell2</td>
<td><a href="action.php">cell3</a></td>
</tr>
The class="notes_row" is only there if notes are present for the row above it. 只有在上一行的注释存在的情况下,class =“ notes_row”才存在。 How can I hide the tr and if its there the tr with the notes_row class below it without affecting the other rows using jquery?
我如何隐藏tr,如果它在tr下方隐藏notes_row类,而不会使用jquery影响其他行呢? So if someone clicked cell3 the tr that link is in is hidden then if there is a notes table row below it, it hides that as well.
因此,如果有人单击cell3,则链接所在的tr被隐藏,然后在其下面有一个注释表行,它也将其隐藏。
$('a[href=action.php]').click(function(){ // ... or however you attach to that link
var row = $(this).closest('tr');
// hide this row first
row.hide();
// next, get the next TR, see if it is a notes row, and hide it if it is
var nxt = row.next();
if (nxt.hasClass('notes_row'))
nxt.hide();
// stop link
return false;
});
I think... Going by memory here. 我想...在这里回忆。
EDIT 编辑
Couple minor fixes, and a fiddle link to see it in action: 进行一些较小的修复,并提供一个小提琴链接以查看实际操作:
http://www.jsfiddle.net/E6zcV/ http://www.jsfiddle.net/E6zcV/
This would be a good place for .delegate()
, it can be as simple as: 这对于
.delegate()
来说是个好地方,它可以很简单:
$("#tableID").delegate("a[href='action.php']", "click", function(e) {
$(this).closest("tr").hide().next("tr.notes_row").hide();
e.preventDefault(); //don't follow the action.php href
});
You can test it out here . 您可以在这里进行测试 。 What this does is use
.closest()
to climb up to the <tr>
, .hide()
that row, select the .next()
<tr>
if it has the .notes_row
class, and .hide()
that as well. 这样做是使用
.closest()
爬到该行的<tr>
、. .hide()
, 如果它具有.notes_row
类, 则选择.next()
<tr>
,也选择.notes_row
.hide()
。 Finally I'm adding a event.preventDefault()
on there so we don't actually navigate to action.php
from the link itself. 最后,我在此处添加了一个
event.preventDefault()
,因此我们实际上并不从链接本身导航至action.php
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.