Reputation: 167
HTML:
<table border="1px">
<tr>
<td colspan="2">
<div class="commentLink">
<a onclick="ShowBox.call(this); return false;" href="#">Comment</a>
</div>
</td>
</tr>
<tr class="commentBox" style="display: none;">
<td colspan="2">
<div class="hiddenComment">
<textarea class="textComment" rows="2" cols="100"></textarea>
<input class="foo" type="checkbox" />
<input class="commentBtn" type="button" value="Submit" onclick="addComment.call(this); return false;" />
<input class="commentBtn" type="button" value="Cancel" onclick="HideBox.call(this); return false;" />
</div>
</td>
</tr>
</table>
JS: using jquery 1.4.2
function ShowBox() {
var that = this;
$(function () {
$(".commentBox").show();
//$(that).closest('tr').siblings().show();
});
}
function HideBox() {
var that = this;
$(function () {
$(that).siblings(".foo").attr("checked", false);
$(that).siblings(".textComment").empty();
$(".commentBox").hide();
});
}
I have the two functions to show/hide a tr. The code I have now works, but it will close other elements too. What is the elegant way of doing this?
Upvotes: 1
Views: 143
Reputation: 93623
This should do it:
function ShowBox() {
$(this).closest ('tr').next ('tr.commentBox').show ();
}
function HideBox() {
var jThis = $(this);
jThis.siblings(".foo").attr("checked", false);
jThis.siblings(".textComment").empty ();
jThis.closest ('tr.commentBox').hide ();
}
BTW, for "elegant", remove the onclick
attributes from the HTML!
Then add the click functionality with:
$('td div.commentLink > a').bind ('click', ShowBox, false);
$('td div.hiddenComment > a.commentBtn[value=Submit]').bind ('click', addComment, false);
$('td div.hiddenComment > a.commentBtn[value=Cancel]').bind ('click', HideBox, false);
inside the $(document).ready ()
.
Upvotes: 1
Reputation: 7018
The closest
selector was added in version 1.3 I believe, so just use that.
Upvotes: 0