Question

I want to filter these multiple tables. If i put some value in second table input it filter second table. only first table filter working proper. how can i filter second or more table when i put value on second table input or more table input

<!-- First Table with One input -->
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for products.." title="Type in a name">

<table id="myTable">

    <tr class="header">
    <th style="width:50%;">Name</th>
    <th style="width:30%;">Pack Size</th>
    <th style="width:20%;">Amount</th>
    </tr>
    <tr>
    <td><a href="#">Aluminium Hyperhydrosis Spray</a></td>
    <td>50ml</td>
    <td>Rs.</td>
    </tr>    
</table>


<!-- Second Table with One input -->
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for products.." title="Type in a name">

<table id="myTable">

    <tr class="header">
    <th style="width:50%;">Name</th>
    <th style="width:30%;">Pack Size</th>
    <th style="width:20%;">Amount</th>
    </tr>
    <tr>
    <td>Anti Lice Shampoo</td>
    <td>20ml</td>
    <td>Rs.</td>
    </tr>
</table>

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

Answer 1

因此，要使其正常工作，我必须稍微考虑一下您的标记，例如最初的方式，两个表具有相同的ID，并且对输入字段也适用相同的示例。

const minLength = 2;

const query = (query, table) => {
  Array.prototype.slice.call(table.querySelectorAll("tr")).map(tr => {
    const s = tr.textContent.toLowerCase(), q = query.toLowerCase();
    let style = 'none';

    (s == q || s.indexOf(q) > -1) && q.length > minLength ? style = 'block' :
      q.length <= minLength ? style = 'block' : style = 'none';
		
    if (tr.className.indexOf('header') == -1) {
    	tr.style.display = style;
    }
  });
};

const keyUpHandler = (e) => {
  const tbl = document.querySelector(e.target.getAttribute("data-table"));
  query(e.target.value, tbl);
};

const dispatchEvents = () => {
  Array.prototype.slice.call(document.querySelectorAll("input[type='text']")).map(i => {
    i.onkeyup = keyUpHandler;
  });
};

const launch = () => {
  console.log('Launching...');
  dispatchEvents();
};

launch();

<!-- First Table with One input -->
<input type="text" placeholder="Search for products.." title="Type in a name" data-table="#table1">

<table id="table1">

  <tr class="header">
    <th style="width:50%;">Name</th>
    <th style="width:30%;">Pack Size</th>
    <th style="width:20%;">Amount</th>
  </tr>
  <tr>
    <td><a href="#">Aluminium Hyperhydrosis Spray</a></td>
    <td>50ml</td>
    <td>Rs.</td>
  </tr>
</table>


<!-- Second Table with One input -->
<input type="text" placeholder="Search for products.." title="Type in a name" data-table="#table2">

<table id="table2">

  <tr class="header">
    <th style="width:50%;">Name</th>
    <th style="width:30%;">Pack Size</th>
    <th style="width:20%;">Amount</th>
  </tr>
  <tr>
    <td>Anti Lice Shampoo</td>
    <td>20ml</td>
    <td>Rs.</td>
  </tr>
</table>

Filter Multiple HTML Table from multiple input

1 个答案: