Question

我有一张桌子，还有一个数量列

的过滤器

我的要求是，我想只显示大于过滤器数量列中输入的内容

这是我的逻辑：

$(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>

在这种情况下如何编写表格过滤器

2 个答案: