基于日期下拉列表的表格过滤器

时间：2019-03-15 15:52:20

标签： javascript html

我正在尝试结合很多代码（主要是powershell，javascript，css，html）

以显示前一夜补丁列表的结果，但是我也想显示前几天，以防万一在过去x天内对以前的补丁有疑问。我发现了一些不同的stackoverflows，但是我似乎并没有得到正确的解决，我希望一些新鲜的眼睛可以指出我做错了什么或指导。 

$(function() {
  // Initialise the inputs on page load:
  var today = new Date().toJSON().replace(/..(..)-(..)-(..).*/, '$2/$3/$1');
  $("#selectDate").datepicker({
    dateFormat: 'mm/dd/yy'
  }).val(today).change(applyFilter);
  $("#selectDate2").datepicker({
    dateFormat: 'mm/dd/yy'
  }).val(today).change(applyFilter);
  $("#rangeval").change(applyFilter);

  $.fn.date = function() {
    return new Date((this.is(':input') ? this.val() : this.text()).replace(/\/(..)$/, '/20$1'));
  }

  function applyFilter() {
    var filterType = $("#rangeval").val(),
      start, end;
    // Set the visibility of the two date fields:
    $("#selectDate").toggle(["Single Date", "Custom Date Range"].indexOf(filterType) > -1);
    $("#selectDate2").toggle(filterType === "Custom Date Range");
    // Depending on the type of filter, set the range of dates (start, end):
    if (filterType === "") {
      // Show all: choose extreme dates
      start = new Date('1000-01-01');
      end = new Date('3000-01-01');
    } else if (!parseInt(filterType)) {
      // Use data entry:
      start = $("#selectDate").date();
      end = filterType === "Custom Date Range" ? $("#selectDate2").date() : start;
    } else {
      // Show last X days:
      start = new Date();
      start.setHours(0, 0, 0, 0);
      start.setDate(start.getDate() - parseInt(filterType));
      end = new Date(); // today
    }
    // For each row: set the visibility depending on the date range
    $(".mainBody tr").each(function() {
      var date = $("td:last-child", this).date();
      $(this).toggle(date >= start && date <= end);
    });
  }
  applyFilter(); // Execute also on page load
});
<h1>Windows Updates</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="filter.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<font size="2">Last
  <select class="inputxlg" id="rangeval">
    <option value="1">1</option>
    <option value="30">30</option>
    <option value="45">45</option>
  </select>
  Number of Days</font>
<table id="WinUpdate">
  <tr>
    <td>Server1</td>
  </tr>
</table>
<table>
  <tr>
    <th>Date</th>
    <th>Title</th>
    <th>Status</th>
  </tr>
  <tbody class="mainBody">
    <tr scope="row">
      <td>03/01/2019 03:03:39</td>
      <td>Apple, Inc. - USBDevice - 5/7/2018 12:00:00 AM - 423.36</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/28/2019 21:27:39</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/28/2019 20:27:39</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/28/2019 17:34:39</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/28/2019 17:28:00</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487029)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/28/2019 01:53:47</td>
      <td>Intel - net - 9/3/2018 12:00:00 AM - 20.70.3.3</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/28/2019 01:53:20</td>
      <td>Logitech - Image - 10/22/2012 12:00:00 AM - 13.80.853.0</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/28/2019 01:53:19</td>
      <td>Logitech - MEDIA - 10/22/2012 12:00:00 AM - 13.80.853.0</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/27/2019 18:50:32</td>
      <td>Western Digital Technologies - WDC_SAM - 11/30/2017 12:00:00 AM - 1.2.0.0</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/27/2019 17:37:28</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/26/2019 17:30:06</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/26/2019 00:00:54</td>
      <td>DisplayLink - Display - 5/22/2017 12:00:00 AM - 8.2.1952.0</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/25/2019 20:48:52</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/25/2019 18:26:12</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/24/2019 08:26:23</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/24/2019 03:46:04</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/24/2019 03:06:31</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 08:25:24</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:18:57</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:16:07</td>
      <td>Update for Microsoft Word 2016 (KB4462145) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:10:33</td>
      <td>Update for Microsoft PowerPoint 2016 (KB4461599) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:10:24</td>
      <td>2019-02 Security Update for Adobe Flash Player for Windows 10 Version 1803 for x64-based Systems (KB4487038)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:10:21</td>
      <td>Update for Microsoft Office 2016 (KB4022161) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:10:15</td>
      <td>Update for Microsoft Access 2016 (KB4032257) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:10:06</td>
      <td>Update for Microsoft Project 2016 (KB4462134) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:09:59</td>
      <td>Click-to-Run Update Support</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:09:55</td>
      <td>Update for Microsoft Outlook 2016 (KB4462147) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:04:28</td>
      <td>2019-02 Update for Windows 10 Version 1803 for x64-based Systems (KB4023057)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:01:54</td>
      <td>Security Update for Microsoft Office 2016 (KB4018294) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:01:47</td>
      <td>Windows Malicious Software Removal Tool x64 - February 2019 (KB890830)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:00:04</td>
      <td>Update for Skype for Business 2016 (KB4462114) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 02:49:20</td>
      <td>Security Update for Microsoft Office 2016 (KB4462146) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 02:43:23</td>
      <td>Update for Microsoft Office 2016 (KB4461536) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 02:37:46</td>
      <td>Security Update for Microsoft Excel 2016 (KB4462115) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
  </tbody>
</table>
<table>
  <tr>
    <td>Windows Update Total Count</td>
    <td>34</td>
  </tr>
  <tr>
    <td>Windows Update Success Count</td>
    <td class="UP">34</td>
  </tr>
  <tr>
    <td>Windows Update Success With Errors Count</td>
    <td class="Yellow">0</td>
  </tr>
  <tr>
    <td>Windows Update Waiting/Missed Count</td>
    <td class="Yellow">0</td>
  </tr>
  <tr>
    <td>Windows Update Failed Count</td>
    <td class="down">0</td>
  </tr>
  <tr>
    <td>Windows Update Aborted Count</td>
    <td class="Down">0</td>
  </tr>
</table>

1 个答案:

答案 0 :(得分：0)

  1. 单元格var date = $("td:first-child", this).date();

  2. 没有开始： $(this).toggle(date <= end);

  3. 在加载之前将插件移至：

$.fn.date = function() {
  return new Date((this.is(':input') ? this.val() : this.text()).replace(/\/(..)$/, '/20$1'));
}

$(function() {
  // Initialise the inputs on page load:
  var today = new Date().toJSON().replace(/..(..)-(..)-(..).*/, '$2/$3/$1');
  $("#selectDate").datepicker({
    dateFormat: 'mm/dd/yy'
  }).val(today).change(applyFilter);
  $("#selectDate2").datepicker({
    dateFormat: 'mm/dd/yy'
  }).val(today).change(applyFilter);
  $("#rangeval").change(applyFilter);


  function applyFilter() {
    var filterType = $("#rangeval").val(),
      start, end;
    // Set the visibility of the two date fields:
    $("#selectDate").toggle(["Single Date", "Custom Date Range"].indexOf(filterType) > -1);
    $("#selectDate2").toggle(filterType === "Custom Date Range");
    // Depending on the type of filter, set the range of dates (start, end):
    if (filterType === "") {
      // Show all: choose extreme dates
      start = new Date('1000-01-01');
      end = new Date('3000-01-01');
    } else if (!parseInt(filterType)) {
      // Use data entry:
      start = $("#selectDate").date();
      end = filterType === "Custom Date Range" ? $("#selectDate2").date() : start;
    } else {
      // Show last X days:
      start = new Date();
      start.setHours(0, 0, 0, 0);
      start.setDate(start.getDate() - parseInt(filterType));
      end = new Date(); // today
    }
    // For each row: set the visibility depending on the date range
    $(".mainBody tr").each(function() {
      var date = $("td:first-child", this).date();
      $(this).toggle(date >= start && date <= end);
    });
  }
  applyFilter(); // Execute also on page load
});
<h1>Windows Updates</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="filter.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<font size="2">Last
  <select class="inputxlg" id="rangeval">
    <option value="1">1</option>
    <option value="30">30</option>
    <option value="45">45</option>
  </select>
  Number of Days</font>
<table id="WinUpdate">
  <tr>
    <td>Server1</td>
  </tr>
</table>
<table>
  <tr>
    <th>Date</th>
    <th>Title</th>
    <th>Status</th>
  </tr>
  <tbody class="mainBody">
    <tr scope="row">
      <td>03/01/2019 03:03:39</td>
      <td>Apple, Inc. - USBDevice - 5/7/2018 12:00:00 AM - 423.36</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/28/2019 21:27:39</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/28/2019 20:27:39</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/28/2019 17:34:39</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/28/2019 17:28:00</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487029)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/28/2019 01:53:47</td>
      <td>Intel - net - 9/3/2018 12:00:00 AM - 20.70.3.3</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/28/2019 01:53:20</td>
      <td>Logitech - Image - 10/22/2012 12:00:00 AM - 13.80.853.0</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/28/2019 01:53:19</td>
      <td>Logitech - MEDIA - 10/22/2012 12:00:00 AM - 13.80.853.0</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/27/2019 18:50:32</td>
      <td>Western Digital Technologies - WDC_SAM - 11/30/2017 12:00:00 AM - 1.2.0.0</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/27/2019 17:37:28</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/26/2019 17:30:06</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/26/2019 00:00:54</td>
      <td>DisplayLink - Display - 5/22/2017 12:00:00 AM - 8.2.1952.0</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/25/2019 20:48:52</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/25/2019 18:26:12</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/24/2019 08:26:23</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/24/2019 03:46:04</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/24/2019 03:06:31</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 08:25:24</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:18:57</td>
      <td>2019-02 Cumulative Update for Windows 10 Version 1803 for x64-based Systems (KB4487017)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:16:07</td>
      <td>Update for Microsoft Word 2016 (KB4462145) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:10:33</td>
      <td>Update for Microsoft PowerPoint 2016 (KB4461599) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:10:24</td>
      <td>2019-02 Security Update for Adobe Flash Player for Windows 10 Version 1803 for x64-based Systems (KB4487038)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:10:21</td>
      <td>Update for Microsoft Office 2016 (KB4022161) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:10:15</td>
      <td>Update for Microsoft Access 2016 (KB4032257) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:10:06</td>
      <td>Update for Microsoft Project 2016 (KB4462134) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:09:59</td>
      <td>Click-to-Run Update Support</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:09:55</td>
      <td>Update for Microsoft Outlook 2016 (KB4462147) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:04:28</td>
      <td>2019-02 Update for Windows 10 Version 1803 for x64-based Systems (KB4023057)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:01:54</td>
      <td>Security Update for Microsoft Office 2016 (KB4018294) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:01:47</td>
      <td>Windows Malicious Software Removal Tool x64 - February 2019 (KB890830)</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 03:00:04</td>
      <td>Update for Skype for Business 2016 (KB4462114) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 02:49:20</td>
      <td>Security Update for Microsoft Office 2016 (KB4462146) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 02:43:23</td>
      <td>Update for Microsoft Office 2016 (KB4461536) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
    <tr scope="row">
      <td>02/21/2019 02:37:46</td>
      <td>Security Update for Microsoft Excel 2016 (KB4462115) 64-Bit Edition</td>
      <td class="up">Succeeded</td>
    </tr>
  </tbody>
</table>
<table>
  <tr>
    <td>Windows Update Total Count</td>
    <td>34</td>
  </tr>
  <tr>
    <td>Windows Update Success Count</td>
    <td class="UP">34</td>
  </tr>
  <tr>
    <td>Windows Update Success With Errors Count</td>
    <td class="Yellow">0</td>
  </tr>
  <tr>
    <td>Windows Update Waiting/Missed Count</td>
    <td class="Yellow">0</td>
  </tr>
  <tr>
    <td>Windows Update Failed Count</td>
    <td class="down">0</td>
  </tr>
  <tr>
    <td>Windows Update Aborted Count</td>
    <td class="Down">0</td>
  </tr>
</table>

相关问题
最新问题