jquery remove table row
I'm having a problem removing a table row, I can highlight the row red but when I try to remove it the slideup function messes up. I have wrapped them in a div but I don't no how to access the children of the tr and then the children of that?
$('#test tr:not(:first)').click(function()
{
$(this).css("background-color","red");
$(this).children("td div").slideUp(function()
{
$(this).parent().remove();
});
});
The problem is this line:
$(this).children("td div").slideUp(function()
I also tried
$(t开发者_JS百科his).children("td").children("div").slideUp(function()
The slide up only removes the first column.
<table border="1" width="600" cellspacing="0" cellpadding="0" id="test">
<tr>
<td><b>First Name</b></td>
<td><b>Last Name</b></td>
<td><b>Address</b></td>
<td><b>Town</b></td>
</tr>
<tr>
<td><div>First Name</td>
<td>Last Name</td>
<td>Address</td>
<td>Town</div></td>
</tr>
</table>
Do I need to wrap the content of each <td>
with a div
tag?
Thanks
Calling children("td div")
will find all direct children that match the selector. (all children which are <div>
s that happen to be inside of <td>
s)
Since all of the direct children are <td>
s, it won't match anything.
Calling children("td").children("div")
will find all <div>
s inside of all <td>
s.
It will thus find the only <div>
you have there.
EDIT: You can use jQuery to create wrapper elements; see my blog post:
$('#test tr:not(:first)').click(function() {
$(this).css("background-color","red");
$(this).children().wrapInner('<div>').children().slideUp(function() {
$(this).closest('tr').remove();
});
});
Demo
精彩评论