在asp.net MVC中打印表格行

Question

I'm setting up a table with transactions, and want to be able to print each transaction separately with the click of a button (Basically print each row). 我正在建立一个包含事务的表，并希望能够通过单击一个按钮分别打印每个事务（基本上打印每一行）。 But can't seem to figure out how. 但似乎无法弄清楚如何。

I've tried searching for it on google / stackoverflow but so far i cant find what i'm looking for. 我试图在google / stackoverflow上搜索它，但到目前为止我找不到我想要的东西。

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Clientnumber)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LicensePlate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.AccountNumber)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Amount)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Date)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Status)
        </th>
        <th>
            <a>Gegevens Ophalen</a>
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Clientnumber)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LicensePlate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.AccountNumber)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Amount)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Date)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Status)
            </td>
            <td>
                <button id="idButton" class="btn btn-secondary">Print Transactions</button>
            </td>
        </tr>
    }
</table>

So in the end i want to be able to press a button and get a print preview of the row the button was in. 所以最终我希望能够按下一个按钮，并获得按钮所在行的打印预览。

Answer 1

I created a sample in javascript/jquery, use can apply to your cshtml file. 我在javascript / jquery中创建了一个示例，可以将其应用于您的cshtml文件。

You need copy to HTML file to run this code. 您需要复制到HTML文件才能运行此代码。

 $('.idButton').on('click',function(){ var printed = $(this).closest('tr').html(); newWin= window.open(""); newWin.document.write(printed); newWin.print(); newWin.close(); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body> <h2>HTML Table</h2> <table id="yourtable"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> <th>Print</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> <td><button class="idButton" class="btn btn-secondary">Print Transactions</button></td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> <td><button class="idButton" class="btn btn-secondary">Print Transactions</button></td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> <td><button class="idButton" class="btn btn-secondary">Print Transactions</button></td> </tr> </table> </body> </html>

在asp.net MVC中打印表格行

问题描述

1 个解决方案

解决方案1
1 2019-04-09 13:05:15

在asp.net MVC中打印表格行

问题描述

1 个解决方案

解决方案1 1 2019-04-09 13:05:15

解决方案1
1 2019-04-09 13:05:15