复选框过滤器 HTML 表格 jQuery答案

【问题标题】：Checkbox Filter HTML Table jQuery复选框过滤器 HTML 表格 jQuery
【发布时间】：2016-04-07 03:44:14
【问题描述】：

我有一个我制作的 HTML 表格，其中已经附加了一些 document.ready 函数，该表格只是在加载时按类（.amount）对数据（tr）进行排序，并且还有分页 - 分页技术使用现有的HTML。

如果可能的话，我现在想使用 jQuery 添加一个复选框过滤器，我想做的是在单击复选框时过滤表格以仅显示具有 id 单元格的表格行：

#free

而且显然包含数据，没有前期成本。

https://jsfiddle.net/ghzch66e/19/

        <h1>Table sorting on page load with paging</h1>

    <input type="checkbox"> Free Handset

    <table id="internalActivities">
    <thead>
      <tr>
        <th>head1</th><th>head2</th><th>head3</th><th>head4</th>
      </tr>
    </thead>
    <tbody>
    <tr>
    <td>data</td> <td>data</td> <td>data</td> <td><span id="handsetcost">£364.00 upfront</span><br><span class="amount">£10.10 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£40.40 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£30.30 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£16.04 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="handsetcost">£134.00 upfront</span><br><span class="amount">£12.19 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="handsetcost">£120.00 upfront</span><br><span class="amount">£14.22 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£50.22 per month</span></td>
    </tr>
    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£10.33 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£40.45 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="handsetcost">£200.00 upfront</span><br><span class="amount">£30.84 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£16.14 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£12.10 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£14.02 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£50.88 per month</span></td>
    </tr>
    </tbody>
    </table>

    <input type="button" id="seeMoreRecords" value="More">
    <input type="button" id="seeLessRecords" value="Less">

我做了一个 jsfiddle，所以你可以明白我的意思。

【问题讨论】：

需要分享问题中的代码而不仅仅是小提琴链接
一个元素的ID必须是唯一的...所以free和handsetcost应该是类
ok，可以轻松更改

标签： javascript jquery html checkbox

【解决方案1】：

如前所述，由于元素的 ID 必须是唯一的，因此需要使用 free 和 handset 的类。

然后在分页逻辑中也使用它来过滤行

jQuery(document).ready(function($) {
  var dataRows = [];

  //Create an array of all rows with its value (this assumes that the amount is always a number.  You should add error checking!!  Also assumes that all rows are data rows, and that there are no header rows.  Adjust selector appropriately.
  $('#internalActivities > tbody > tr').each(function(i, j) {
    dataRows.push({
      'amount': parseFloat($(this).find('.amount').text().replace(/£/, "")),
      'row': $(this)
    });
  })

  //Sort the data smallest to largest
  dataRows.sort(function(a, b) {
    return a.amount - b.amount;
  });

  //Remove existing table rows.  This assumes that everything should be deleted, adjust selector if needed :).
  $('#internalActivities > tbody').empty();

  //Add rows back to table in the correct order.
  dataRows.forEach(function(ele) {
    $('#internalActivities > tbody').append(ele.row);
  })
});

jQuery(document).ready(function($) {

  var trs = $("#internalActivities tbody tr");
  var btnMore = $("#seeMoreRecords");
  var btnLess = $("#seeLessRecords");
  var trsLength = trs.length;
  var currentIndex = 3,
    page = 3;

  trs.hide();
  trs.slice(0, currentIndex).show();
  checkButton();

  btnMore.click(function(e) {
    e.preventDefault();
    trs.slice(currentIndex, currentIndex + page).show();
    currentIndex += page;
    checkButton();
  });

  btnLess.click(function(e) {
    e.preventDefault();
    trs.slice(currentIndex - page, currentIndex).hide();
    currentIndex -= page;
    checkButton();
  });

  function checkButton() {
    var currentLength = trs.filter("tr:visible").length;

    if (currentLength >= trsLength) {
      btnMore.hide();
    } else {
      btnMore.show();
    }

    if (trsLength > page && currentLength > page) {
      btnLess.show();
    } else {
      btnLess.hide();
    }

  }
  $('#filter-free').change(function() {
    var $all = $("#internalActivities tbody tr").hide();
    trs = this.checked ? $all.has('.free') : $all;
    trsLength = trs.length;
    trs.slice(0, page).show();
    currentIndex = page;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Table sorting on page load with paging</h1>

<input type="checkbox" id="filter-free">Free Handset

<table id="internalActivities">
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
      <th>head4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="handsetcost">£364.00 upfront</span>
        <br><span class="amount">£10.10 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£40.40 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£30.30 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£16.04 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="handsetcost">£134.00 upfront</span>
        <br><span class="amount">£12.19 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="handsetcost">£120.00 upfront</span>
        <br><span class="amount">£14.22 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£50.22 per month</span>
      </td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£10.33 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£40.45 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="handsetcost">£200.00 upfront</span>
        <br><span class="amount">£30.84 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£16.14 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£12.10 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£14.02 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£50.88 per month</span>
      </td>
    </tr>
  </tbody>
</table>

<input type="button" id="seeMoreRecords" value="More">
<input type="button" id="seeLessRecords" value="Less">

【讨论】：