在 jquery 中打印表格

Question

我想打印一个没有edit | delete 按钮字段的表格，并将表格在打印中居中。

我正在尝试使用此代码，但输出打印与我预期的不符。

Here is the output print

<table class="table"  border="1" cellpadding="3" id="printTable">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Equipamento.Nome)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Colaborador)
        </th>
        <th style="align-content:center">
            @Html.DisplayNameFor(model => model.Qtd)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DataRequisicao)
        </th>
        <th>

        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Equipamento.Nome)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Colaborador)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Qtd)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DataRequisicao)
            </td>

            <td id="x">
                @Html.ActionLink("Edit", "Edit", new { id = item.RequisicaoId }) |
                @Html.ActionLink("Details", "Details", new { id = item.RequisicaoId }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.RequisicaoId })
            </td>
        </tr>

    }

</table>

这是 jquery 脚本，我正在尝试使用 $("#printTable tr td") 隐藏元素，但它不起作用。

<script>
    function printData() {
        var divToPrint = document.getElementById("printTable");
        newWin = window.open("");
        newWin.document.write(divToPrint.outerHTML);
        newWin.print();
        newWin.close();
    }

    $('button').on('click', function () {
        $("#printTable tr td").each(function () {
            $(this).on('click', function () {
                $(this).find("#x").toggleClass('hidden');
            });
        });
        printData();
    })
</script>

Answer 1

看起来您正在应用一个没有附带 css 的类 hidden。

尝试在文件顶部添加此块：

<style>
  .hidden { display: none; }
</style>