如何使用 jQuery 过滤表格？

发布于 2024-12-27 23:27:42 字数 1054 浏览 4 评论 0原文

我一直在尝试使用 jQuery（在咖啡脚本中）在表上实现用户可配置的过滤器。

我已经用 CSS 类注释了表中的每一行，该 CSS 类标识了其类别和品牌：

<table id="items_list">
  <tr>
    <th>Foo</th> 
    ... <!-- 6 header columns -->
  </tr>
  <tr class="category-12 brand-37">
    <td>...</td>
  </tr>
  <tr class="category-17 brand-4">
    <td>...</td>
  </tr>

我有

jQuery -> 
  items = $("#items-list").html()  # works - though it has a <tbody> around it
  $('#category_id').change ->      # gets the onChange for the category dropdown
    category_id = $('#category_id :selected').val() # this works, I get the id
    # this next line always returns null
    selected_records = $(items).filter("tr[class=category-#{category_id}]").html()
    $('#items_list').html(selected_records)

倒数第二行肯定是错误的，但我不明白为什么。有什么想法吗？

原文

I'm stuck trying to implement a user-configurable filter on a table using jQuery (in coffeescript).

I have annotated each row in my table with a CSS class that identifies its category and brand:

<table id="items_list">
  <tr>
    <th>Foo</th> 
    ... <!-- 6 header columns -->
  </tr>
  <tr class="category-12 brand-37">
    <td>...</td>
  </tr>
  <tr class="category-17 brand-4">
    <td>...</td>
  </tr>

I have <select> dropdown listing all of the categories, so I tried to hook on to it's onChange event to filter out only the rows in the table that match that category's ID. Here's what I've got so far -- it executes every time I change the category, but the selected_records is always null.

jQuery -> 
  items = $("#items-list").html()  # works - though it has a <tbody> around it
  $('#category_id').change ->      # gets the onChange for the category dropdown
    category_id = $('#category_id :selected').val() # this works, I get the id
    # this next line always returns null
    selected_records = $(items).filter("tr[class=category-#{category_id}]").html()
    $('#items_list').html(selected_records)

That second last line must be wrong, but I can't figure out why. Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

恰似旧人归 2025-01-03 23:27:42

您不必获取 html 并对其进行操作。您基本上可以只显示/隐藏 table 内的 tr 元素。此外，您还可以使用 this.val() 来获取 change 事件处理程序中 select 元素的选定值。试试这个。

  var items = $("#items-list tr")
  $('#category_id').change(function(){
      //First hide all the trs
      //then filter trs based on category-id class and show them
      items.hide().filter(".category-" + $(this).val()).show();
  });

You don't have to get the html and manipulate with it. You can basically just show/hide the tr elements inside the table. Also you can just use this.val() to get the selected value of a select element inside the change event handler. Try this.

  var items = $("#items-list tr")
  $('#category_id').change(function(){
      //First hide all the trs
      //then filter trs based on category-id class and show them
      items.hide().filter(".category-" + $(this).val()).show();
  });

回复收藏 0 原文

~没有更多了~