Как написать фильтр таблицы в этом случае

Question

я получил таблицу, а также фильтр для Quantity колонки

Мое требование заключается в том, что я хочу, чтобы отобразить только содержимое, которые больше, чем введенное в фильтре колонка

Quanity Это моя логика:

$(document).ready(function() { 
    (function ($) { 
     $('#filter').keyup(function() { 
      var rex = new RegExp($(this).val(), 'i'); 
      $('#myTable tr').hide(); 
      $('#myTable td:eq(2)').filter(function() { 
       return rex.test($(this).text()); 
      }).show(); 
     }) 
    }(jQuery)); 
}); 

http://jsfiddle.net/52aK9/1578/

пожалуйста, дайте мне знать, как это сделать.

Answer 1

Вы можете сделать это, как показано ниже.

$('#filter').keyup(function() { 
    var quantiy = +$(this).val(); //+ to convert string to number 

    var tr = $('#myTable tbody tr'); 
    tr.hide(); 
    tr.filter(function() { 
     return +$('td:eq(3)', this).text() > quantiy; //select quantity column by '$('td:eq(3)', this)' 
    }).show(); 
}); 

UPDATED FIDDLE

Answer 2

Полный Javascript решение:

window.onload = function() { 
 
    document.getElementById('filter').addEventListener('keyup', function(e) { 
 
    [].slice.call(document.querySelectorAll('#myTable tbody tr')).forEach(function(element, index, arr) { 
 
     if (+element.children[3].textContent < +e.target.value) { 
 
     element.style.display = 'none'; 
 
     } else { 
 
     element.style.display = ''; 
 
     } 
 
    }, false); 
 
    }) 
 
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> 
 

 
<div class="input-group"> <span class="input-group-addon">Filter For Quantity</span> 
 

 
    <input id="filter" type="text" class="form-control" placeholder="Type here..."> 
 
</div> 
 

 

 
<table class="table table-striped marg_none tablesorter tablesorter-jui" id="myTable" role="grid"> 
 
    <colgroup class="tablesorter-colgroup"> 
 
     <col style="width: 0.9%;"> 
 
     <col style="width: 14%;"> 
 
     <col style="width: 14%;"> 
 
     <col style="width: 14%;"> 
 
     <col style="width: 14%;"> 
 
     <col style="width: 8%;"> 
 
     <col style="width: 8.1%;"> 
 
     <col style="width: 8.1%;"> 
 
     <col style="width: 8.1%;"> 
 
    </colgroup> 
 
    <thead> 
 
    <tr role="row" class="tablesorter-headerRow"> 
 
     <th data-sorter="true" width="1%" data-column="0" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="myTable" unselectable="on" aria-sort="none" aria-label=": No sort applied, activate to apply an ascending sort" style="-webkit-user-select: none;"> 
 
      <div class="tablesorter-header-inner"></div> 
 
     </th> 
 
     <th data-sorter="true" width="9.8%" data-column="1" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="myTable" unselectable="on" aria-sort="none" aria-label="Name: No sort applied, activate to apply an ascending sort" style="-webkit-user-select: none;"> 
 
      <div class="tablesorter-header-inner">Name </div> 
 
     </th> 
 
     <th width="9.8%" data-column="2" class="tablesorter-header tablesorter-headerDesc" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="myTable" unselectable="on" aria-sort="descending" aria-label="Difference: Descending sort applied, activate to apply an ascending sort" style="-webkit-user-select: none;"> 
 
      <div class="tablesorter-header-inner">Difference</div> 
 
     </th> 
 
     <th data-sorter="true" width="9.8%" data-column="3" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="myTable" unselectable="on" aria-sort="none" aria-label="Quantity: No sort applied, activate to apply an ascending sort" style="-webkit-user-select: none;"> 
 
      <div class="tablesorter-header-inner">Quantity</div> 
 
     </th> 
 
     <th data-sorter="true" width="9.8%" data-column="4" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="myTable" unselectable="on" aria-sort="none" aria-label="Volumne: No sort applied, activate to apply an ascending sort" style="-webkit-user-select: none;"> 
 
      <div class="tablesorter-header-inner">Volumne</div> 
 
     </th> 
 
     <th data-sorter="true" width="6%" data-column="5" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="myTable" unselectable="on" aria-sort="none" aria-label="Open: No sort applied, activate to apply an ascending sort" style="-webkit-user-select: none;"> 
 
      <div class="tablesorter-header-inner">Open</div> 
 
     </th> 
 
     <th data-sorter="true" width="6%" data-column="6" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="myTable" unselectable="on" aria-sort="none" aria-label="Current Price: No sort applied, activate to apply an ascending sort" style="-webkit-user-select: none;"> 
 
      <div class="tablesorter-header-inner">Current Price</div> 
 
     </th> 
 
     <th data-sorter="true" width="6%" data-column="7" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="myTable" unselectable="on" aria-sort="none" aria-label="Prev Diff: No sort applied, activate to apply an ascending sort" style="-webkit-user-select: none;"> 
 
      <div class="tablesorter-header-inner">Prev Diff</div> 
 
     </th> 
 
     <th data-sorter="true" width="6%" data-column="8" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="myTable" unselectable="on" aria-sort="none" aria-label="Low: No sort applied, activate to apply an ascending sort" style="-webkit-user-select: none;"> 
 
      <div class="tablesorter-header-inner">Low</div> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="positivebody" aria-live="polite" aria-relevant="all"> 
 
    <tr role="row" class="odd"> 
 
     <td class="text-center"> 
 
      <label for="RELAXO" class="marg_none"> 
 
       <div></div> 
 
      </label> 
 
     </td> 
 
     <td>RELAXO</td> 
 
     <td>59674</td> 
 
     <td>325063</td> 
 
     <td>1628.89</td> 
 
     <td>499.85</td> 
 
     <td>502.65</td> 
 
     <td>1.15</td> 
 
     <td>488.5</td> 
 
    </tr> 
 
    <tr role="row" class="even"> 
 
     <td class="text-center"> 
 
      <label for="CENTURYTEX" class="marg_none"> 
 
       <div></div> 
 
      </label> 
 
     </td> 
 
     <td>CENTURYTEX</td> 
 
     <td>59077</td> 
 
     <td>1613314</td> 
 
     <td>8904.04</td> 
 
     <td>532</td> 
 
     <td>562.4</td> 
 
     <td>32.95</td> 
 
     <td>528</td> 
 
    </tr> 
 
    <tr role="row" class="odd"> 
 
     <td class="text-center"> 
 
      <label for="LT" class="marg_none"> 
 
       <div></div> 
 
      </label> 
 
     </td> 
 
     <td>LT</td> 
 
     <td>40523</td> 
 
     <td>1044399</td> 
 
     <td>12461.35</td> 
 
     <td>1199.1</td> 
 
     <td>1193.2</td> 
 
     <td>-1.95</td> 
 
     <td>1182.5</td> 
 
    </tr> 
 
    <tr role="row" class="odd"> 
 
     <td class="text-center"> 
 
      <label for="BEML" class="marg_none"> 
 
       <div></div> 
 
      </label> 
 
     </td> 
 
     <td>BEML</td> 
 
     <td>-9734</td> 
 
     <td>246402</td> 
 
     <td>2336.68</td> 
 
     <td>977.25</td> 
 
     <td>940.45</td> 
 
     <td>-34.7</td> 
 
     <td>926.4</td> 
 
    </tr> 
 
    </tbody> 
 
</table>