Javascript 按多行过滤 table

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 中输入值，它只过滤 [=15] 的第二列的值=].我想在 Input 1 和 Input 2 中输入值，它将过滤 row 其中包含 Input 1 和 Input 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>

这是一个天真的解决方案 - 在将显示设置为空字符串之前，请确保之前的过滤器没有隐藏特定行。不过，您仍然需要注意 'resetting' 过滤器。

我会采用以下解决方案（当然，要重构）：

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>

Answer 2

像下面这样尝试。使用 onkeyup 而不是 onkeydown。使用不带 parameter 的 myFunction，因为我们需要从所有输入应用过滤器。

将 id 添加到每个 input 并在 filters 数组中检索它们的值。添加了解释逻辑的注释。

在下面试试。

function myFunction() {
  var tr, td, i, txtValue;
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // get all filter values.
  // use isApplyFilter to get whether any input is provided for filter or not.
  let filters = [],
    isApplyFilter = false;
  for (i = 0; i < 6; i++) {
    filters.push($('#input' + (i + 1)).val().toUpperCase().trim());
    isApplyFilter = isApplyFilter || !!filters[i];
  }

  // loop over all tr except 1st one because it is header.
  for (i = 1; i < tr.length; i++) {

    // if isApplyFilter = false then show all rows
    if (!isApplyFilter) {
      tr[i].style.display = "";
      continue;
    }

    // by default hide row
    tr[i].style.display = "none";

    // loop over all columns and respective filter value
    for (j = 0; j < 6; j++) {
      // get column
      td = tr[i].getElementsByTagName("td")[j];

      // if filter has value then only check for condition
      if (filters[j] && td) {
        txtValue = td.textContent || td.innerText;
        // on satisfied condition show row and break inner loop
        if (txtValue.toUpperCase().indexOf(filters[j]) > -1) {
          tr[i].style.display = "";
          break;
        }
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row">
  <label class="font-18"> Input 1 </label>
  <br>
  <input id='input1' class="font-15 w-180-px" onkeyup="myFunction()" type="text">

  <label class="font-18"> Input 2 </label>
  <br>
  <input id='input2' class="font-15 w-180-px" onkeyup="myFunction()" type="text">

  <label class="font-18"> Input 3 </label>
  <br>
  <input id='input3' class="font-15 w-180-px" onkeyup="myFunction()" type="text">

  <label class="font-18"> Input 4 </label>
  <br>
  <input id='input4' class="font-15 w-180-px" onkeyup="myFunction()" type="text">

  <label class="font-18"> Input 5 </label>
  <br>
  <input id='input5' class="font-15 w-180-px" onkeyup="myFunction()" type="text">

  <label class="font-18"> Input 6 </label>
  <br>
  <input id='input6' class="font-15 w-180-px" onkeyup="myFunction()" type="text">
</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>

Javascript 按多行过滤 table

Javascript filter in table by multiple rows

javascript

jquery

html-table

dom-events