javascript - 如何删除多行或单行

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/

score 1 · Accepted Answer

我清理了东西并重构了你的代码。这是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"));
});

编辑：

由于您使用了 HTML 中的 onClick 处理程序，您的 Fiddle 无法正常工作。这不一定是错的，但 JSFiddle 似乎并不喜欢它。在整个过程中，我用 jQuery 处理程序替换了那些。

在 HTML 中，您不需要重复对话，因此我将它们取出并将它们放在表格之外。还有一些锚标签也是多余的，我删除了。我还在你的输入标签的末尾添加了斜杠......并不是所有的必要，但 XHTML 需要它，它让 Fiddle 发疯了，就是这样。我在某些地方（例如取消/删除按钮）使用类而不是 ID 来提供一种简单的方法来在 jQuery 中将它们作为一个组引用。（你不能有重复的 ID 标签而不会发生任何事情。）data-father所有儿子上的标签是稍后用来确定应该显示showModal哪个对话框（delAllModal或）的标签，更重要的是，将儿子与他们的父亲联系起来以允许delSonModal他们作为一个整体被删除。

在 JS 中：

我重写的很多代码只是内联执行而不是调用函数。例外是showModal。
$("input.hide").click...连接对话框中的两个“取消”按钮。
$("#vessel_tab input.delete")...连接表中的所有删除按钮。它基本上只是一个包装showModal......
...这让我们看到了肉。showModal：
- 该var $modal...行根据单击的按钮是否为孩子选择要显示的对话框。
- 显示对话框，并连接其删除按钮。请注意，我one在这里使用，而不是on. 这将为按钮创建一个单击处理程序，但在使用时立即处理它。on可能会工作得很好，但这留下的混乱更少。
- 点击处理程序调用fadeOut传递的 ID，以及具有该 ID 作为其data-father属性的任何元素 - 实际上是 ID 的子级。对于父亲来说，这隐藏了父亲和儿子。对于 Sons，它只隐藏了 Son，因为没有任何元素具有data-father与 Son 的 ID 匹配的属性。
- 最后，我们关闭对话框。

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

score 0 · Accepted Answer

我会稍微改变一下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。

javascript - 如何删除多行或单行

2 回答 2

Related

Reference