Печать таблицы в jquery - PullRequest
       4

Печать таблицы в jquery

0 голосов
/ 27 сентября 2018

Я хотел бы напечатать таблицу без полей кнопки edit | delete и отцентрировать таблицу в печатном виде.

Я пытаюсь использовать этот код, но вывод печати не такой, как я ожидал.

Вот вывод 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 голосов
/ 27 сентября 2018

Похоже, вы применяете класс hidden без сопровождающего css.

Попробуйте добавить этот блок вверху вашего файла:

<style>
  .hidden { display: none; }
</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...