时间戳

首页 > 解决方案 > 在 asp.net MVC 中打印表格行

javascript - 在 asp.net MVC 中打印表格行

问题描述

我正在设置一个包含交易的表格，并希望能够通过单击按钮分别打印每笔交易（基本上打印每一行）。但似乎无法弄清楚如何。

我试过在 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>

所以最后我希望能够按下一个按钮并获得按钮所在行的打印预览。

标签： javascriptc#asp.net-mvcrazorrazor-pages

解决方案

我在 javascript/jquery 中创建了一个示例，使用可以应用于您的 cshtml 文件。

您需要复制到 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>

推荐阅读