Question

我无法从我只想要的表中下载数据。我有一个ejs文件，它检索数据并将其显示在表中。然后我添加了一些input:search来搜索表中的数据，并且只显示与搜索栏中的字符串匹配的内容。我已经有了这个download按钮，该按钮仅下载整个表格，我想要的是仅在使用搜索栏后才下载表格中显示的内容。

我尝试在网络中搜索，但我只能看到下载静态表数据/没有搜索查询。这就是我遵循的有关如何将表下载到xls文件https://www.codexworld.com/export-html-table-data-to-excel-using-javascript/

的内容

这是我的index.ejs

<input class="form-control" id="myInput" type="text" placeholder="Search..">
<hr>
<div class="tableFixHead">
  <% if(details!=null) { %>
    <table class="text-center table table-striped table-hover table-dark table-fixed">
      <thead>
        <tr class="table-primary" style="color:black; font-weight:bold;">
          <th scope="col">Route</th>
          <th scope="col">Origin </th>
          <th scope="col">Destination</th>
          <th scope="col">Estimated Time of Arrival </th>
          <th scope="col">Date </th>
          <th scope="col">Time</th>
        </tr>
      </thead>
      <% details.forEach(function(item){ %>
        <tbody id="myTable">

          <tr>
            <td>
              <%= item.route%>
            </td>
            <td>
              <%= item.origin %>
            </td>
            <td>
              <%= item.destination%>
            </td>
            <td>
              <%= item.estimatedTimeOfArrival %>
            </td>
            <td>
              <%= item.date%>
            </td>
            <td>
              <%= item.time%>
            </td>
          </tr>
        </tbody>
        <% }) %>
    </table>
    <% } %>

</div>
<button onclick="exportTableToCSV('data.csv')">Download Table</button>
</div>

这是用于过滤搜索查询中的表格的代码

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

我希望一旦使用搜索栏，它只会显示我想要的数据，此后，一旦单击下载按钮，它将仅下载显示的数据，而不下载表中的全部数据。

例如，我在表中搜索数字1，它将仅显示数字为1的所有数据，这就是我只想下载的数据，但情况是单击了{{1 }}不仅包含download，还包含所有数字预先谢谢你。

如何使用javascript下载数据库表（html）中的仅所需数据？

0 个答案: