Question

我有父子关系的桌子。如果删除父亲，则删除其下的儿子。您也可以删除单个儿子。到目前为止我的代码没有删除具有相应id的父亲或者儿子，它删除了表中的第一件事。 这是我的代码：

<script>
function delVesselAll(num){
    $("#vessel_tab #father" + num).remove();
    $("#vessel_tab .son" + num).remove();
    document.getElementById(id).style.display = 'block';
};
function delSon(num){
    $("#vessel_tab #son" + num).remove();
    document.getElementById(id).style.display = 'block';
};
</script>

我的HTML：

<table id="vessel_tab">
  <tr id="father1">
    <td colspan="2" class="father_header">Father 1</td>
    <td><a style="text-decoration:none;" onclick="showModal('delAllModal')"><input type="button" value="delete" onclick="showModal('delAllModal')"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:10px; display:none" id="delAllModal">
Are you sure you want to delete the father and corresponding sons?<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delAllModal')"/><input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/></div>
  </tr>
  <tr class="son1" id="son1">
    <td>&nbsp;</td>
    <td>Son 1</td>
    <td><a style="text-decoration:none;" onclick="showModal('delSonModal')"><input type="button" value="delete"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none" id="delSonModal">
Please confirm deletion.<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delSonModal')"/><input type="button" value="Delete" onclick="delSon(1)"/></div>
  </tr>
  <tr class="son2" id="son2">
    <td>&nbsp;</td>
    <td>Son 2</td>
    <td><a style="text-decoration:none;" onclick="showModal('delSonModal')"><input type="button" value="delete"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none" id="delSonModal">
Please confirm deletion.<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delSonModal')"/><input type="button" value="Delete" onclick="delSon(2)"/></div>
  </tr>
  <tr id="father2">
    <td colspan="2">Father 2</td>
    <td><a style="text-decoration:none;" onclick="showModal('delAllModal')"><input type="button" value="delete"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:10px; display:none" id="delAllModal">
Are you sure you want to delete the father and corresponding sons?<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delAllModal')"/><input type="button" value="Delete" onclick="delVesselAll(2)" id="delete"/></div>
  </tr>
 <tr class="son3" id="son3">
    <td>&nbsp;</td>
    <td>Son 3</td>
    <td><a style="text-decoration:none;" onclick="showModal('delSonModal')"><input type="button" value="delete"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none" id="delSonModal">
Please confirm deletion.<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delSonModal')"/><input type="button" value="Delete" onclick="delSon(3)"/></div>
  </tr>
  <tr class="son4" id="son4">
    <td>&nbsp;</td>
    <td>Son 4</td>
    <td><a style="text-decoration:none;" onclick="showModal('delSonModal')"><input type="button" value="delete"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none" id="delSonModal">
Please confirm deletion.<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delSonModal')"/><input type="button" value="Delete" onclick="delSon(4)"/></div>
  </tr>
</table>

另外，jsfiddle。它不能正常工作（不知道我做错了什么），但我的代码就在那里。提前致谢！ http://jsfiddle.net/7tFFS/1/

Answer 1

我清理了一些东西并重构了你的代码。这是JSFiddle。

HTML：

<div class="delModal" style="z-index:999999; margin-left:200px; margin-top:10px; display:none"
id="delAllModal">Are you sure you want to delete the father and corresponding sons?
    <br
    />
    <input type="button" value="Cancel" class="hide" />
    <input type="button" value="Delete" class="delete" />
</div>
<div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none"
id="delSonModal">Please confirm deletion.
    <br />
    <input type="button" value="Cancel" class="hide" />
    <input type="button" value="Delete" class="delete" />
</div>
<table id="vessel_tab">
    <tr id="father1">
        <td colspan="2" class="father_header">Father 1</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
    <tr class="son1" id="son1" data-father="father1">
        <td>&nbsp;</td>
        <td>Son 1</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
    <tr class="son2" id="son2" data-father="father1">
        <td>&nbsp;</td>
        <td>Son 2</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
    <tr id="father2">
        <td colspan="2">Father 2</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
    <tr class="son3" id="son3" data-father="father2">
        <td>&nbsp;</td>
        <td>Son 3</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
    <tr class="son4" id="son4" data-father="father2">
        <td>&nbsp;</td>
        <td>Son 4</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
</table>

JS：

function showModal(id, child) {
    var $modal = $(child ? "#delSonModal" : "#delAllModal");
    $modal.fadeIn("slow")
        .find(".delete")
        .one("click", function () {
            $("#" + id + ", [data-father=" + id + "]").fadeOut("slow");
            $modal.fadeOut("slow");
        });
}


$("input.hide").click(function () {
    $(this).closest("div.delModal").fadeOut("slow");
});

$("#vessel_tab input.delete").bind("click", function () {
    var $tr = $(this).closest("tr");
    showModal($tr.attr("id"), !!$tr.data("father"));
});

编辑：

由于您使用了in-HTML onClick处理程序，您的小提琴无效。这不一定是错的，但JSFiddle似乎并不喜欢它。我用jQuery处理程序替换了那些。

在HTML中，您不必重复对话，所以我把它们拿出来放在桌子外面。还有一些锚标签也是多余的，我删除了。我还在输入标签的末尾添加了斜杠......并非真的有必要，但是XHTML需要它并且它让Fiddle变得疯狂，所以就是这样。我在某些地方使用类而不是ID（比如取消/删除按钮）来提供一种简单的方法来在jQuery中作为一组引用它们。（如果没有事情发生，你就不能拥有重复的ID标签。）所有儿子的data-father标签是showModal中稍后用来确定哪个对话框（delAllModal或{{ 1}}）应该显示，更重要的是将儿子与他们的父亲联系起来，以便将他们作为一个整体删除。

在JS中：

我重写的很多代码只是在线执行而不是调用函数。例外是delSonModal。
showModal连接对话框中的两个“取消”按钮。
$("input.hide").click...连接表中的所有删除按钮。它基本上只是$("#vessel_tab input.delete")... ...

的包装器
......它带给我们肉。 showModal：

showModal行会根据点击的按钮是否为儿童来选择要显示的对话框。

显示对话框，其删除按钮已连线。请注意，我在此处使用var $modal...，而不是one。这将为按钮创建一个单击处理程序，但在使用它时会立即将其处理掉。 on可能会很好，但这样可以减少后果。

点击处理程序对传递的ID以及具有该ID作为其on属性的任何元素调用fadeOut - 实际上是ID的子项。对于父亲来说，这隐藏了父亲和儿子。对于Sons，它只隐藏了Son，因为没有元素会有data-father属性与Son的ID匹配。

最后，我们关闭对话框。

我希望这一切都很清楚。快乐黑客！

Answer 2

我会稍微改变html的结构。

为什么不添加包含在父元素下的儿子。例如：

<tr id="father_1">
  <td class="father_1">Father 1</td>
  <td class="son_of_f1" id="son_1">Son 1</td>
  <td class="son_of_f1" id="son_2">Son 2</td>
  <td class="son_of_f1" id="son_3">Son 3</td>
  <td class="son_of_f1" id="son_4">Son 4</td>
</tr>

然后你可以用JQuery做

 $('#father_1').fadeOut(500);
 $('.son_of_f1').fadeOut(500);`

您可以将_1设置为动态并将其保存到变量

中

注意：为每个儿子使用类而不是IDS更好，因为你不能让两个儿子拥有相同的id。

如何删除多行或单行

2 个答案: