在jQuery中打印表

时间:2018-09-27 13:37:12

标签: jquery printing

我想打印一个没有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>

1 个答案:

答案 0 :(得分:0)

您似乎正在应用没有随附CSS的类hidden

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

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