Question

我这里有嵌套表并删除动画。 class="record"完全删除，但class="nested"无效。当我删除记录class="record"时，我还想删除class="nested"嵌套记录。但为什么它不起作用？

这是我的输出。当我删除计数器000007时，嵌套表也应该有删除动画，但只记录000007。

enter image description here

HTML

<table id="tfhover">

<thead>
<tr>
<th></th>
</tr>
</thead>

<tbody>

<tr class="record">
<td></td>
</tr>
// Nested Table

<tr>
<td>
<table id="loginTable">
<thead>
        <tr class="nested">
        <th></th>
        </tr>
        </thead>
        <tbody>

<tr class="nested">
<td></td>
</tr>

</tbody></table> // Nested table Close

</td></tr> // Nested table tr td Close

</tbody></table> // Main table Close

完整删除脚本

<script>
$(function() {
$(".delbutton").click(function(){
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("name");
//Built a url to send
var info = 'name=' + del_id;
 if(confirm("Sure you want to delete this update? There is NO undo!"))
          {
 $.ajax({
   type: "GET",
   url: "delete.php",
   data: info,
   success: function(){
   }
 });

    $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
    .animate({ opacity: "hide" }, "slow")
}
return false;
});
});
</script>

Answer 1

您没有有效的HTML，因为您的<tr>元素直接嵌套在另一个<tr>元素中。（注意</td></tr></tr>行。）

也许你想要这个：

<table id="tfhover">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr class="record">
            <td></td>
        </tr>
        <tr>
            <td>
                <table id="loginTable">
                    <thead>
                        <tr class="nested">
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="nested">
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

或者这个：

<table id="tfhover">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr class="record">
            <td>
                <table id="loginTable">
                    <thead>
                        <tr class="nested">
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="nested">
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

更新：

现在你有了有效的HTML，我猜你想要的最好：

$(this).closest(".record").animate({
    backgroundColor: "#fbc7c7"
}, "fast").animate({
    opacity: "hide"
}, "slow");

$(this).closest(".record").next().find(".nested").animate({
    backgroundColor: "#fbc7c7"
}, "fast").animate({
    opacity: "hide"
}, "slow");

jsfiddle

表行parent（）不起作用

1 个答案: