Home > Blockchain >  filtering html table using dropdown select
filtering html table using dropdown select

Time：10-03

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("mylist");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i  ) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#mylist {
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th,
#myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
  background-color: #f1f1f1;
}
<h2>My Customers</h2>
<select id="mylist" onchange="myFunction()" class='form-control'>
  <option value="">ALL</option>
  <option value="fish_1">fish_1</option>
  <option value="fish_12">fish_12</option>
  <option value="chicken_1">chicken_1</option>
  <option value="chicken_12">chicken_12</option>
  <option value="fish_123">fish_123</option>
  <option value="chicken_123">chicken_123</option>
  <option value="fish">fish</option>
  <option value="chicken">chicken</option>
  <option value="c">c</option>
</select>

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">dish</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>fish_1</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>fish_12</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>chicken_1</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>chicken_12</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>fish_123</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>chicken_123</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>fish</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>chicken</td>
  </tr>
</table>

Description

I have been filtering my HTML table using a select tag with the index value of 1 which is the second column

Problem

If I select fish_1 it also shows fish_1,fish_12,fish_123

example

Filtering with the value chicken_1 Result:

A header Another header
Island Trading chicken_1
Koniglich Essen chicken_12
Island Trading chicken_1
Magazzini Alimentari Riuniti chicken_123
Paris specialites chicken

what I need

  1. if I select chicken_1 I need to filter only chicken_1
  2. if I select chicken_12 I need to show only chicken_12, not chicken_123

CodePudding user response：

Just change indexOf to ===

 if (td.innerHTML.toUpperCase() === filter) {

I would toggle a hide class

if (td) {
  tr[i].classList.toggle("hide", filter && td.innerHTML.toUpperCase() !== filter)
}

Show code snippet

CodePudding user response：

Define a RegExp for your filter item and check exact match.

let filterRegex = new RegExp(`^${filter}$`)
if (td.innerHTML.toUpperCase().match(filterRegex)){}


function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("mylist");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i  ) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      let filterRegex = new RegExp(`^${filter}$`)
      if (td.innerHTML.toUpperCase().match(filterRegex)) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#mylist {
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th,
#myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
  background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h2>My Customers</h2>
  <select id="mylist" onchange="myFunction()" class='form-control'>
    <option value="">ALL</option>
    <option value="fish_1">fish_1</option>
    <option value="fish_12">fish_12</option>
    <option value="chicken_1">chicken_1</option>
    <option value="chicken_12">chicken_12</option>
    <option value="fish_123">fish_123</option>
    <option value="chicken_123">chicken_123</option>
    <option value="fish">fish</option>
    <option value="chicken">chicken</option>
    <option value="c">c</option>
  </select>


  <table id="myTable">
    <tr class="header">
      <th style="width:60%;">Name</th>
      <th style="width:40%;">dish</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>fish_1</td>
    </tr>
    <tr>
      <td>Berglunds snabbkop</td>
      <td>fish_12</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>chicken_1</td>
    </tr>
    <tr>
      <td>Koniglich Essen</td>
      <td>chicken_12</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>fish_123</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>chicken_123</td>
    </tr>
    <tr>
      <td>North/South</td>
      <td>fish</td>
    </tr>
    <tr>
      <td>Paris specialites</td>
      <td>chicken</td>
    </tr>
  </table>

</body>

</html>

CodePudding user response：

The indexOf() method returns the position of the first occurrence of a specified value in a string. indexOf() returns -1 if the value is not found. When you use indexof it will found "fish" in the String and direct return the occurrence of fish ..

Try to check condition on whole String

 if (td.innerHTML.toUpperCase() === filter) { Your Code }

CodePudding user response：

Change your condition to td.innerHTML.toUpperCase() === filter to display the row only on an exact match.

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("mylist");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i  ) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      if (td.innerHTML.toUpperCase() === filter) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
<select id="mylist" onchange="myFunction()">
  <option value="">ALL</option>
  <option value="fish_1">fish_1</option>
  <option value="fish_12">fish_12</option>
  <option value="chicken_1">chicken_1</option>
  <option value="chicken_12">chicken_12</option>
  <option value="fish_123">fish_123</option>
  <option value="chicken_123">chicken_123</option>
  <option value="fish">fish</option>
  <option value="chicken">chicken</option>
  <option value="c">c</option>
</select>

<table id="myTable">
  <tr class="header"><th>Name</th><th>dish</th></tr>
  <tr><td>Alfreds Futterkiste</td><td>fish_1</td></tr>
  <tr><td>Berglunds snabbkop</td><td>fish_12</td></tr>
  <tr><td>Island Trading</td><td>chicken_1</td></tr>
  <tr><td>Koniglich Essen</td><td>chicken_12</td></tr>
  <tr><td>Laughing Bacchus Winecellars</td><td>fish_123</td></tr>
  <tr><td>Magazzini Alimentari Riuniti</td><td>chicken_123</td></tr>
  <tr><td>North/South</td><td>fish</td></tr>
  <tr><td>Paris specialites</td><td>chicken</td></tr>
</table>

Page link：https//www.codepudding.com/Blockchain/137117.html

Prev:How to make two lines on either side of the navigation bar?
Next:Who is responsible for establishing formatting context for `body` element?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding