克隆 table,删除行,恢复 table

Clone a table, remove rows, restore table

我需要这方面的帮助。 我有一个带有 select-过滤器的 table,每次过滤器更改时,我都需要将 table 重置为其原始状态并设置过滤器 --> 删除未使用的行(因为行不能隐藏对吗?)。

这就是我尝试过的方法,但没有奏效。 tableParts 是包含我的 table 的 div。我发现 change-event 只触发一次,所以在第一个之后不再有警报。我究竟做错了什么?它仍在进行中,所以开关没有完全编程,因为我已经在改变事件上挣扎了...

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;
    }
}
<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>

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>

可以隐藏,这是实现过滤器最简单的方法(无需其他库)。

您的代码中有一些错误:

  • addEventListener() 适用于原生 DOM 元素,不适用于 jQuery 集合。请改用 on()

  • 不要调用您作为事件处理程序传递的函数,而只是传递它(没有括号)。

这是一个片段,它使用 toggle() 来 hide/show 匹配过滤器的行:

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