Question

我需要一些帮助。我有一个带有选择过滤器的表，每次过滤器更改时我需要将表重置为其原始状态并设置过滤器 - ＆gt;删除未使用的行（因为行无法正确隐藏？）。

所以这是我尝试过的，但没有奏效。 tableParts是包含我的表的div。我发现更改事件只被触发一次，所以在第一次之后没有更多警报。我究竟做错了什么？它仍然在进行中，所以开关没有完全编程，因为我已经在改变事件上挣扎......

＆＃13;

var originalContent;

$(document).ready(function() {
    originalContent =  $('#tableParts').clone();

    $('#selectState').addEventListener('change', changeFilter());

});

function changeFilter() {
    $('#tableParts').replaceWith(originalContent);

    switch (this.value) {
        case "0":
            alert("0");
            break;
        case "1":
            alert("1");
            break;
        case "2":
            alert("2");
            break;
        case "3":
            alert("3");
            break;
        case "4":
            $(".label-danger").closest('tr').remove();
            break;
    }
}

＆＃13;

<div id="tableParts" class="project-list">
  <table id="table_participants" class="table footable table-hover" data-page-size="1000" data-filter=#filter>
  
    <thead>
      <tr>
        <th><input type="checkbox" id="checkAll"></th>
        <th>ID</th>
        <th>
          <select id="selectState" class="input-sm form-control">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </th>
      </tr>
    </thead>
    
    <tbody>
      <tr class="footable-even">
        <td><span class="footable-toggle"></span>
          <input type="hidden" name="list[members][0][linked]" value="0">
          <input type="checkbox" name="list[members][0][linked]" value="1">                      </td>
        <td>123</td>
        <td class="client-status"><span class="label-danger"></span></td>
       </tr>
       <tr class="footable-odd">
        <td><span class="footable-toggle"></span>
          <input type="hidden" name="list[members][0][linked]" value="0">
          <input type="checkbox" name="list[members][0][linked]" value="1">                      </td>
        <td>454</td>
        <td class="client-status"><span class="label-new"></span></td>
       </tr>
    </tbody>
    
  </table>
 </div>

＆＃13;

Answer 1

var originalContent;

$(document).ready(function() {
    originalContent =  $('#tableParts').clone();

    $('#selectState').change(function(){
      changeFilter(this);
    });

});

function changeFilter(obj) {
    //$('#tableParts').replaceWith(originalContent);
    switch ($(obj).val()) {
        case "0":
            alert("0");
            break;
        case "1":
            alert("1");
            break;
        case "2":
            alert("2");
            break;
        case "3":
            alert("3");
            break;
        case "4":
            $(".label-danger").closest('tr').remove();
            break;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tableParts" class="project-list">
  <table id="table_participants" class="table footable table-hover" data-page-size="1000" data-filter=#filter>
  
    <thead>
      <tr>
        <th><input type="checkbox" id="checkAll"></th>
        <th>ID</th>
        <th>
          <select id="selectState" class="input-sm form-control">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </th>
      </tr>
    </thead>
    
    <tbody>
      <tr class="footable-even">
        <td><span class="footable-toggle"></span>
          <input type="hidden" name="list[members][0][linked]" value="0">
          <input type="checkbox" name="list[members][0][linked]" value="1">                      </td>
        <td>123</td>
        <td class="client-status"><span class="label-danger"></span></td>
       </tr>
       <tr class="footable-odd">
        <td><span class="footable-toggle"></span>
          <input type="hidden" name="list[members][0][linked]" value="0">
          <input type="checkbox" name="list[members][0][linked]" value="1">                      </td>
        <td>454</td>
        <td class="client-status"><span class="label-new"></span></td>
       </tr>
    </tbody>
    
  </table>
 </div>

Answer 2

可以隐藏行，这是最容易实现过滤器（没有其他库）。

您的代码中存在一些错误：

addEventListener()适用于本机DOM元素，而不适用于jQuery集合。请改用on()。

不要调用作为事件处理程序传递的函数，而只是传递它（没有括号）。

以下是使用toggle()隐藏/显示与过滤器匹配的行的代码段：

$(document).ready(function() { $('#selectState').on('change', changeFilter); }); function changeFilter() { var filterValue = this.value; $('#tableParts tr').slice(1).each(function() { $(this).toggle($(".client-status", this).text() === filterValue || filterValue === ''); }); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tableParts" class="project-list"> <table id="table_participants" class="table footable table-hover" data-page-size="1000" data-filter=#filter> <thead> <tr> <th><input type="checkbox" id="checkAll"></th> <th>ID</th> <th> <select id="selectState" class="input-sm form-control"> <option value="">(all)</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </th> </tr> </thead> <tbody> <tr class="footable-even"> <td><span class="footable-toggle"></span> <input type="hidden" name="list[members][0][linked]" value="0"> <input type="checkbox" name="list[members][0][linked]" value="1"> </td> <td>123</td> <td class="client-status"><span class="label-danger">1</span></td> </tr> <tr class="footable-odd"> <td><span class="footable-toggle"></span> <input type="hidden" name="list[members][0][linked]" value="0"> <input type="checkbox" name="list[members][0][linked]" value="1"> </td> <td>454</td> <td class="client-status"><span class="label-new">2</span></td> </tr> </tbody> </table> </div>

克隆表，删除行，还原表

2 个答案: