Question

我希望能够删除表中的行，并检查用户是否必须能够删除表中的最后一行。

我有一个类似于此的表：

<table id="columns" class="dynamicadd">
    <thead><tr>
            <th>Period</th>
            <th>Result</th>
            <th>Show</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><select name="colperiod[]"><!-- options --></select></td>
            <td><select name="colresult[]"><!-- options --></select></td>
            <td><select name="colshow[]"><!-- options --></td>
            <td><a class="delete" href="#">X</a></td>
        </tr>
    </tbody>
</table>

我在同一页面上有第二张表，结构非常相似，ID不同：

<table id="aggregate" class="dynamicadd">
    <thead><tr>
            <th>Period</th>
            <th>Result</th>
            <th>Show</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><select name="acolperiod[]"><!-- options --></select></td>
            <td><select name="acolresult[]"><!-- options --></select></td>
            <td><select name="acolshow[]"><!-- options --></td>
            <td><a class="delete" href="#">X</a></td>
        </tr>
    </tbody>
</table>

然后我有一些用于克隆行的javascript：这是有用的。

我感兴趣的是可以在表中使用单行删除功能。如果我需要添加一个新表，我希望能够这样做，而无需添加JavaScript。如果我为“删除”选项使用不同的类，我可以使用它。但是，这是我尝试从单个函数中删除任何一个表中的行：

$(document).on ('click', '.delete', function (event) {
    event.preventDefault();
    // count the number of rows in the current table
    var delCount = $(this).closest('table').children ('.delete').length;
    console.log (delCount); // 0 ??
    if (delCount > 1)
    {
        $(this).closest ('tr').remove();
    }
    else
    {
        // don't delete the last row.
        $(this).effect ("shake", {distance: 5});
    }
});

变量delCount为0，这让我相信我的选择器出了问题。

Answer 1

检查行中是否有任何兄弟姐妹<tbody>;

更简单，效率更高

$(document).on ('click', '.delete', function (event) {
    event.preventDefault();

    var $btn = $(this),// cache `$(this)` to avoid calling it more than once
        $row = $btn.closest('tr');

    if ($row.siblings().length)
    {
        $row.remove();
    }
    else
    {
        $btn.effect ("shake", {distance: 5});
    }
});

Answer 2

在写这个问题时，我做了一些“意外学习”。

.children应为.find：

$(document).on ('click', '.delete', function (event) {
    event.preventDefault();
    // count the number of rows in the current table
    var delCount = $(this).closest('table').find ('.delete').length;
    console.log (delCount);
    if (delCount > 1)
    {
        $(this).closest ('tr').remove();
    }
    else
    {
        // don't delete the last row.
        $(this).effect ("shake", {distance: 5});
    }
});

修改

有关.children和.find的不同之处的解释，我发现this explanation by mkyong有所帮助。 tl;博士：.children看起来是一级，.find可以完全搜索任何子级，孙级，大...元素

计算父元素中的类出现次数

2 个答案: