Question

我有这些表行有复选框：

@foreach (var item in Model) {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.InvoiceNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.InvoiceDate, "{0:D}")
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Organisation.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.TotalExcludingGst)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Status)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ExportedDateTime)
                </td>
                <td class="centered">
                    <input type="checkbox" name="ids" value=@item.InvoiceId />
                </td>
            </tr>
        }

我要做的是当用户点击某个按钮时，这些行会消失/不可见。

所以我写了一些jquery：

$("#btnexport").click(function () {

        $('input:checkbox:checked').each(function (index) {

        });
    });

所以我在想这会做什么就是点击按钮获取所有选中的复选框哪个好。我希望能够添加它，以便对于每个复选框，它将找到相关的trs并使那些坏男孩看不见。

任何人都可以帮我解决这个问题吗？

Answer 1

尝试以下方法：

$("#btnexport").click(function () {
  $('#idOfTable').find('input:checkbox:checked').closest('tr').hide();
});

Answer 2

试试这个：

$("#btnexport").click(function () {
    $('input:checkbox:checked').each(function (index) {
        $(this).closest("TR").hide();
    });
});

Answer 3

您可以获取表格行，并使用has方法过滤掉已选中复选框的行：

$("#btnexport").click(function () {
  $('tr').has('input:checkbox:checked').hide();
});

请注意：

表并不是真的用于隐藏行或单元格，因此您在某些浏览器中会遇到一些布局问题。

如何隐藏具有复选框的表行

3 个答案: