时间戳

首页 > 解决方案 > 如何将其他过滤条件添加到 jquery 脚本

javascript - 如何将其他过滤条件添加到 jquery 脚本

问题描述

我正在使用这个 jquery 脚本按日期之间的句点过滤数据。现在我需要再添加一个过滤条件，但我不知道 jquery。真的，我更喜欢使用普通的香草 javascript 来做到这一点，因为我更了解它。

第二个过滤条件将按“位置”列。

function filterRowsRelatorioPorItemTable() {

  var from = $('#datefilterfromRelatorioPorItemTable').val();
  var to = $('#datefiltertoRelatorioPorItemTable').val();
  

  if (!from && !to) { // no value for from and to
    return;
 
  }

  from = from || '2020-01-01'; // default from to a old date if it is not set
  to = to || '2999-12-31';

  var dateFrom = moment(from);
  var dateTo = moment(to);

  $('#RelatorioPorItemTable tr').each(function(i, tr) {
    var val = $(tr).find("td:nth-child(6)").text();
    var dateVal = moment(val, "DD/MM/YYYY");
    var visible = (dateVal.isBetween(dateFrom, dateTo, null, [])) ? "" : "none" ; // [] for inclusive
    $(tr).css('display', visible);

// setTimeout(CalColumnHistVendas, 1000);

  });

}

$('#datefilterfromRelatorioPorItemTable').on("change", filterRowsRelatorioPorItemTable);
$('#datefiltertoRelatorioPorItemTable').on("change", filterRowsRelatorioPorItemTable);

 
  
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
   <div class="row">

            <span>INICIAL</span>
            <input type="date"  id="datefilterfromRelatorioPorItemTable" data-date-split-input="true">

            <span>FINAL</span>
          <input type="date"  id="datefiltertoRelatorioPorItemTable" data-date-split-input="true">
             <span>Position</span>
          <input type="text"  id="PositionfiltertoRelatorioPorItemTable" >
        </div>
        

    <br><br>


     <table id="RelatorioPorItemTable" class="order-table table dark3Dtable">
            <thead>
          <tr>
            <th>Name</th>
            <th>email</th>
            <th>Position</th>
            <th>Phone</th>
            <th>Price</th>
               <th>date</th>
          </tr>
            </thead>

          <tr>
            <td>John Doe</td>
            <td>john.doe@gmail.com</td>
             <td>Manager</td>
            <td>0123456789</td>
            <td>99.80</td>
            <td>15/02/2020</td>
          </tr>

          <tr>
            <td>Jane Vanda</td>
            <td>jane@vanda.org</td>
            <td>Helper</td>
            <td>9876543210</td>
            <td>349.51</td>
            <td>19/02/2020</td>
          </tr>
          <tr>
            <td>Marth Johnson</td>
            <td>Marth@batman.com</td>
            <td>Free lance</td>
            <td>6754328901</td>
            <td>500.50</td>
            <td>18/02/2020</td>
          </tr>
              <tr>
            <td>Alferd Penyworth</td>
            <td>alfred@batman.com</td>
            <td>Helper</td>
            <td>6754328901</td>
            <td>199.00</td>
            <td>25/05/2020</td>
          </tr>
                    <tr>
            <td>Segio Smith</td>
            <td>Segio@gmail.com</td>
            <td>Free lance</td>
            <td>6754328901</td>
            <td>300.00</td>
            <td>19/02/2020</td>
          </tr>

      </table>

先感谢您

标签： javascripthtml

解决方案

无论您的日期 Jquery 过滤器如何，您都可以添加纯 JS 来进行位置过滤。

编辑：

在评论中的用户评论中，我将其编辑为位置过滤器以仅过滤来自第一个日期过滤器的结果。

按日期过滤时还要添加一个类none；

$(tr).css('display', visible);

变成：

$(tr).css('display', visible).addClass(visible);

现在，当tr为位置搜索过滤器选择标签时，只有tr没有none类的标签：

tr = table.getElementsByTagName('tr');

改成：

tr = table.querySelectorAll('tr:not(.none)');

现在位置过滤器仅适用于第一个结果集以及未输入日期时...

以 console.log 为例： 

function filterRowsRelatorioPorItemTable() {

  var from = $('#datefilterfromRelatorioPorItemTable').val();
  var to = $('#datefiltertoRelatorioPorItemTable').val();
  

  if (!from && !to) { // no value for from and to
    return;
 
  }

  from = from || '2020-01-01'; // default from to a old date if it is not set
  to = to || '2999-12-31';

  var dateFrom = moment(from);
  var dateTo = moment(to);

  $('#RelatorioPorItemTable tr').each(function(i, tr) {
    var val = $(tr).find("td:nth-child(6)").text();
    var dateVal = moment(val, "DD/MM/YYYY");
    var visible = (dateVal.isBetween(dateFrom, dateTo, null, [])) ? "" : "none" ; // [] for inclusive
    $(tr).css('display', visible).addClass(visible);

// setTimeout(CalColumnHistVendas, 1000);

  });

}

$('#datefilterfromRelatorioPorItemTable').on("change", filterRowsRelatorioPorItemTable);
$('#datefiltertoRelatorioPorItemTable').on("change", filterRowsRelatorioPorItemTable);

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("PositionfiltertoRelatorioPorItemTable");
  filter = input.value.toUpperCase();
  table = document.getElementById("RelatorioPorItemTable");
  
  tr = table.querySelectorAll('tr:not(.none)');
  console.log(tr);
  
  
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[2];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
   <div class="row">

            <span>INICIAL</span>
            <input type="date"  id="datefilterfromRelatorioPorItemTable" data-date-split-input="true">

            <span>FINAL</span>
          <input type="date"  id="datefiltertoRelatorioPorItemTable" data-date-split-input="true">
             <span>Position</span>
          <input type="text"  id="PositionfiltertoRelatorioPorItemTable" onkeyup="myFunction()">
        </div>
        

    <br><br>


     <table id="RelatorioPorItemTable" class="order-table table dark3Dtable">
            <thead>
          <tr>
            <th>Name</th>
            <th>email</th>
            <th>Position</th>
            <th>Phone</th>
            <th>Price</th>
               <th>date</th>
          </tr>
            </thead>

          <tr>
            <td>John Doe</td>
            <td>john.doe@gmail.com</td>
             <td>Manager</td>
            <td>0123456789</td>
            <td>99.80</td>
            <td>15/02/2020</td>
          </tr>

          <tr>
            <td>Jane Vanda</td>
            <td>jane@vanda.org</td>
            <td>Helper</td>
            <td>9876543210</td>
            <td>349.51</td>
            <td>19/02/2020</td>
          </tr>
          <tr>
            <td>Marth Johnson</td>
            <td>Marth@batman.com</td>
            <td>Free lance</td>
            <td>6754328901</td>
            <td>500.50</td>
            <td>18/02/2020</td>
          </tr>
              <tr>
            <td>Alferd Penyworth</td>
            <td>alfred@batman.com</td>
            <td>Helper</td>
            <td>6754328901</td>
            <td>199.00</td>
            <td>25/05/2020</td>
          </tr>
                    <tr>
            <td>Segio Smith</td>
            <td>Segio@gmail.com</td>
            <td>Free lance</td>
            <td>6754328901</td>
            <td>300.00</td>
            <td>19/02/2020</td>
          </tr>

      </table>

例子： 

function filterRowsRelatorioPorItemTable() {

  var from = $('#datefilterfromRelatorioPorItemTable').val();
  var to = $('#datefiltertoRelatorioPorItemTable').val();
  

  if (!from && !to) { // no value for from and to
    return;
 
  }

  from = from || '2020-01-01'; // default from to a old date if it is not set
  to = to || '2999-12-31';

  var dateFrom = moment(from);
  var dateTo = moment(to);

  $('#RelatorioPorItemTable tr').each(function(i, tr) {
    var val = $(tr).find("td:nth-child(6)").text();
    var dateVal = moment(val, "DD/MM/YYYY");
    var visible = (dateVal.isBetween(dateFrom, dateTo, null, [])) ? "" : "none" ; // [] for inclusive
    $(tr).css('display', visible).addClass(visible);

// setTimeout(CalColumnHistVendas, 1000);

  });

}

$('#datefilterfromRelatorioPorItemTable').on("change", filterRowsRelatorioPorItemTable);
$('#datefiltertoRelatorioPorItemTable').on("change", filterRowsRelatorioPorItemTable);

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("PositionfiltertoRelatorioPorItemTable");
  filter = input.value.toUpperCase();
  table = document.getElementById("RelatorioPorItemTable");
  
  tr = table.querySelectorAll('tr:not(.none)');
  //console.log(tr);
  
  
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[2];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
   <div class="row">

            <span>INICIAL</span>
            <input type="date"  id="datefilterfromRelatorioPorItemTable" data-date-split-input="true">

            <span>FINAL</span>
          <input type="date"  id="datefiltertoRelatorioPorItemTable" data-date-split-input="true">
             <span>Position</span>
          <input type="text"  id="PositionfiltertoRelatorioPorItemTable" onkeyup="myFunction()">
        </div>
        

    <br><br>


     <table id="RelatorioPorItemTable" class="order-table table dark3Dtable">
            <thead>
          <tr>
            <th>Name</th>
            <th>email</th>
            <th>Position</th>
            <th>Phone</th>
            <th>Price</th>
               <th>date</th>
          </tr>
            </thead>

          <tr>
            <td>John Doe</td>
            <td>john.doe@gmail.com</td>
             <td>Manager</td>
            <td>0123456789</td>
            <td>99.80</td>
            <td>15/02/2020</td>
          </tr>

          <tr>
            <td>Jane Vanda</td>
            <td>jane@vanda.org</td>
            <td>Helper</td>
            <td>9876543210</td>
            <td>349.51</td>
            <td>19/02/2020</td>
          </tr>
          <tr>
            <td>Marth Johnson</td>
            <td>Marth@batman.com</td>
            <td>Free lance</td>
            <td>6754328901</td>
            <td>500.50</td>
            <td>18/02/2020</td>
          </tr>
              <tr>
            <td>Alferd Penyworth</td>
            <td>alfred@batman.com</td>
            <td>Helper</td>
            <td>6754328901</td>
            <td>199.00</td>
            <td>25/05/2020</td>
          </tr>
                    <tr>
            <td>Segio Smith</td>
            <td>Segio@gmail.com</td>
            <td>Free lance</td>
            <td>6754328901</td>
            <td>300.00</td>
            <td>19/02/2020</td>
          </tr>

      </table>

如何 - 过滤/搜索表

推荐阅读