如果移除链接，如何在HTML表格中去掉链接之间的空格

Question

我在jsp中有如下表格，其中链接是使用Java ArrayList动态生成并加载到页面中的。

<%ArrayList<String> display  = ArrayList<String>)session.getAttribute("links");       %>
<table border="0" width="100%" style ="">
    <tr></tr>
    <td width="20%"></td>
    <table border="0" width ="50%" id="LinkDisplay">
        <div id="LinkDisplay">
            <%if(display!=null){
            for(int p=0;p<display.size();p++){%>
            <tr><td width="42%">&nbsp;</td><td><a href="javascript:removeLink('<%=display.get(p)%>')"><%=display.get(p)%></a><br></td><td>&nbsp;</td></tr>
            <% } }%>
        </div>
    </table>
    <td></td>
    <tr></tr>
</table>

当我点击链接时，它会调用 removeLink JavaScript 函数将链接删除并隐藏。

$('#LinkDisplay a').click(function() { 
    var $this = $(this);         
    $this.remove();
}

但是当链接被删除时，它会留下链接之间的空格。如何在点击链接时去除这些空格。我尝试隐藏甚至尝试删除空的 td 元素（没有链接文本），但这并没有帮助..所有链接的页面如下所示：

点击链接后，它会留下以下空格：

此外，如果有超过 10 个链接，我想添加滚动条，可以在表格上做到吗？ 如果表格不是做所有这些事情的正确方式，是否有其他简单的方法？

- Bot Planter

---

注意，你的HTML无效。你不能将div作为table的子元素。 - Rory McCrossan

你的HTML标记无效。不过在CSS4中，应该可以这样做：tr:not(:has(li > a)) {display: none;} - A. Wolff

@RoryMcCrossan 这里可以省略使用 table，可以用 divs 代替 tr 来实现，这样你就可以轻松管理布局。 - cнŝdk

Answer 1

你应该删除完整的<TR>标签，可以使用.closest()向上遍历到<TR>并将其删除。

$('#LinkDisplay a').click(function () {
    var $this = $(this);
    $this.closest('tr').remove();
});

- Satpal

Answer 2

你只是在移除 a 元素，你需要移除整个 tr：

$('#LinkDisplay a').click(function() { 
    var $this = $(this);         
    $this.parent().parent().remove();
}

或者更好的方法是 $this.parent("#LinkDisplay tr").remove();。

注意：

• 您不能为多个元素使用相同的id="LinkDisplay"，在这里您将其用于table和div。
• 您的HTML无效，您不能将div作为table的直接子元素，需要进行修复。

是的，您可以不使用table来完成此操作，只需为每个链接使用一个div，它们将默认显示为block，并使用margin与您的div而不是 作为内容的td，这样您可以更好地管理布局。

- cнŝdk