Javascript 按多行过滤表中的内容

Question

我正在尝试制作根据多个输入进行过滤的过滤器。一个输入将过滤在一列中。

我的 JavaScript 和代码:

function myFunction(column, input) {
  var filter, table, tr, td, i, txtValue;
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[column];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<div class="row">
<input class="font-15 w-180-px" onkeydown="myFunction(0, this)" type="text">
 <label class="font-18"> Input 1 </label>
<br>

 <input class="font-15 w-180-px" onkeydown="myFunction(1, this)" type="text">
   <label class="font-18"> Input 2 </label>
            <br>

<input class="font-15 w-180-px" onkeydown="myFunction(2, this)" type="text">
<label class="font-18"> Input 3 </label>
            <br>

<input class="font-15 w-180-px" onkeydown="myFunction(3, this)" type="text">
<label class="font-18"> Input 4 </label>
            <br>

<input class="font-15 w-180-px" onkeydown="myFunction(4, this)" type="text">
<label class="font-18"> Input 5 </label>
            <br>

<input class="font-15 w-180-px" onkeydown="myFunction(5, this)" type="text">
<label class="font-18"> Input 6 </label>
            <br>
</div>


<table id="myTable">
  <tr class="header">
    <th style="width:20%;">1</th>
    <th style="width:20%;">2</th>
    <th style="width:20%;">3</th>
    <th style="width:20%;">4</th>
    <th style="width:20%;">5</th>
    <th style="width:20%;">6</th>
  </tr>
  <tr>
    <td>Some 1 - a</td>
    <td>Some 2 - a</td>
    <td>Some 3 - a</td>
    <td>Some 4 - a</td>
    <td>Some 5 - a</td>
    <td>Some 6 - a</td>
  </tr>
  <tr>
    <td>Some 1 - b</td>
    <td>Some 2 - b</td>
    <td>Some 3 - b</td>
    <td>Some 4 - b</td>
    <td>Some 5 - b</td>
    <td>Some 6 - b</td>
  </tr>
  <tr>
    <td>Some 1 - c</td>
    <td>Some 2 - c</td>
    <td>Some 3 - c</td>
    <td>Some 4 - c</td>
    <td>Some 5 - c</td>
    <td>Some 6 - c</td>
  </tr>
  <tr>
    <td>Some 1 - d</td>
    <td>Some 2 - d</td>
    <td>Some 3 - d</td>
    <td>Some 4 - d</td>
    <td>Some 5 - d</td>
    <td>Some 6 - d</td>
  </tr>
</table>

所以基本上 - 现在我在 Input 1 中输入值，它会直接过滤 table 但然后我在 Input 2 中输入值，它会过滤仅适用于表第二列的值。我想在 Input 1 和 Input 2 中输入值，它将过滤 row 其中 Input 1 和 包含>输入 2 值。感谢您的帮助。

顺便说一句。我使用 JQuery 没有问题。

Answer 1

function myFunction(column, input) {
            var filter, table, tr, td, i, txtValue;
            filter = input.value.toUpperCase();
            console.log(filter);
            table = document.getElementById("myTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[column];
                if (td) {
                    txtValue = td.textContent || td.innerText;
                    console.log(filter, txtValue.toUpperCase().indexOf(filter));
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        if(tr[i].style.display != "none") // if something has been hidden by previous filter, we don't want to show it
                          tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }

<div class="row">
    
    <input class="font-15 w-180-px" onchange="myFunction(0, this)" type="text"><label class="font-18"> Input 1 </label><br>
   <input class="font-15 w-180-px" onchange="myFunction(1, this)" type="text"> <label class="font-18"> Input 2 </label>
                <br>
    

    <input class="font-15 w-180-px" onchange="myFunction(2, this)" type="text"><label class="font-18"> Input 3 </label>
                <br>
</div>

<table id="myTable">
    <tr class="header">
        <th style="width:20%;">1</th>
        <th style="width:20%;">2</th>
        <th style="width:20%;">3</th>
        <th style="width:20%;">4</th>
        <th style="width:20%;">5</th>
        <th style="width:20%;">6</th>
    </tr>
    <tr>
        <td>Some 1 - a</td>
        <td>Some 2 - a</td>
        <td>Some 3 - a</td>
        <td>Some 4 - a</td>
        <td>Some 5 - a</td>
        <td>Some 6 - a</td>
    </tr>
    <tr>
        <td>Some 1 - b</td>
        <td>Some 2 - b</td>
        <td>Some 3 - b</td>
        <td>Some 4 - b</td>
        <td>Some 5 - b</td>
        <td>Some 6 - b</td>
    </tr>
    <tr>
        <td>Some 1 - c</td>
        <td>Some 2 - c</td>
        <td>Some 3 - c</td>
        <td>Some 4 - c</td>
        <td>Some 5 - c</td>
        <td>Some 6 - c</td>
    </tr>
    <tr>
        <td>Some 1 - d</td>
        <td>Some 2 - d</td>
        <td>Some 3 - d</td>
        <td>Some 4 - d</td>
        <td>Some 5 - d</td>
        <td>Some 6 - d</td>
    </tr>
</table>

这是一个简单的解决方案 - 在将显示设置为空字符串之前，请确保先前的过滤器没有隐藏特定行。不过，您仍然需要“重置”过滤器。

我会采用以下解决方案(当然，要重构):

var filters = ["", "", ""];

function applyNewFilters() {
  console.log(filters);
  var rows = $('#myTable').find('tr');
  for(var i = 1; i < rows.length; i++) {
    var row = $(rows[i]); // we're re-applying all filters anyway
    row.show();
  }
  for(var i = 1; i < rows.length; i++) {
    var row = $(rows[i]);
    for(var f = 0; f < filters.length; f++) {
      //column is going to be equal to f
      var col = $(row.find('td')[f]).text();
      console.log(col);
      if(col.indexOf(filters[f]) < 0) {
        row.hide();
      }
    }
  }
}

$('.filter-input').on('change', function() {
  var $modifiedInput = $(this);
  console.log($modifiedInput.val());
  var column = $modifiedInput.attr('data-col');
    filters[column] = $modifiedInput.val();
    applyNewFilters();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
        
        <input class="font-15 w-180-px filter-input" data-col="0" type="text"><label class="font-18"> Input 1 </label><br>
       <input class="font-15 w-180-px filter-input" data-col="1"  type="text"> <label class="font-18"> Input 2 </label>
                    <br>
        

        <input class="font-15 w-180-px filter-input"  data-col="2" type="text"><label class="font-18"> Input 3 </label>
                    <br>
    </div>

    <table id="myTable">
        <tr class="header">
            <th style="width:20%;">1</th>
            <th style="width:20%;">2</th>
            <th style="width:20%;">3</th>
            <th style="width:20%;">4</th>
            <th style="width:20%;">5</th>
            <th style="width:20%;">6</th>
        </tr>
        <tr>
            <td>Some 1 - a</td>
            <td>Some 2 - b</td>
            <td>Some 3 - a</td>
            <td>Some 4 - a</td>
            <td>Some 5 - a</td>
            <td>Some 6 - a</td>
        </tr>
        <tr>
            <td>Some 1 - b</td>
            <td>Some 2 - b</td>
            <td>Some 3 - b</td>
            <td>Some 4 - b</td>
            <td>Some 5 - b</td>
            <td>Some 6 - b</td>
        </tr>
        <tr>
            <td>Some 1 - c</td>
            <td>Some 2 - c</td>
            <td>Some 3 - c</td>
            <td>Some 4 - c</td>
            <td>Some 5 - c</td>
            <td>Some 6 - c</td>
        </tr>
        <tr>
            <td>Some 1 - d</td>
            <td>Some 2 - d</td>
            <td>Some 3 - d</td>
            <td>Some 4 - d</td>
            <td>Some 5 - d</td>
            <td>Some 6 - d</td>
        </tr>
    </table>