Trying to Filter Html table using array to check string

Issue

I am trying to filter an HTML table and show me the rows that exist that have ALL of the matches of my keywords -

For instance. I have my html table as follows

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
</style>

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
</style>
<table class="tg">
<thead>
  <tr>
    <th class="tg-0pky">ID</th>
    <th class="tg-0pky">Name</th>
    <th class="tg-0pky">Tags</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-0pky">1</td>
    <td class="tg-0pky">Test1</td>
    <td class="tg-0pky">AIRPORT TERMINAL,AVIATION,HANGAR,MAINTENANCE BUILDING,NEW CONSTRUCTION,OFFICE</td>
  </tr>
  <tr>
    <td class="tg-0pky">2</td>
    <td class="tg-0pky">Test2</td>
    <td class="tg-0pky">HIGHER EDUCATION,OFFICE,RENOVATION,SCHOOLS - COLLEGE</td>
  </tr>
  <tr>
    <td class="tg-0pky">3</td>
    <td class="tg-0pky">Test3</td>
    <td class="tg-0pky">HIGHER EDUCATION,REMODEL,SCHOOLS - COLLEGE</td>
  </tr>
  <tr>
    <td class="tg-0pky">4</td>
    <td class="tg-0pky">Test4</td>
    <td class="tg-0pky">APARTMENT,HIGHER EDUCATION,NEW CONSTRUCTION,SCHOOLS - COLLEGE</td>
  </tr>
</tbody>
</table>

From here I am trying to do JQuery or JavaScript to filter and only show me the rows that contain atleast ALL of the specific words.

So for instance.

If I send an array

const Keywords = ["HIGHER EDUCATION", "RENOVATION"];

it should show me rows with ID 2 only If I send an array

const Keywords = ["HIGHER EDUCATION", "SCHOOLS-COLLEGE"];

it should show me rows with ID 2 and 3 as they both contain those words it should not show me 1 or 4 as it does not contain all those words plus extras.

I plan on using this that I currently use to filter my columns on other items -

 var jo = $("#" + tablename).find("tr:not(:first)");
        jo.filter(function (i, v) {
            var $t = $(this).children(":eq(" + indexColumn + ")");
            for (var d = 0; d < data.length; ++d) {
                if ($t.is(":not(:containsIN('" + data[d] + "'))")) {
                    return true;
                }
            }
            return false;
        }).hide();

I am getting column index by

  $("#" + tablename).find('th').each(function () {
            if ($(this).find('span').text() == 'tags') {
                d = $(this).index();
                
                var e = $("#" + tablename).find('tr:eq(' + row.index() + ')').find('td:eq(' + d + ')');
              
            }
        });

I hope I am making sense on this.

Solution

In this example, we just use the :last-child to find the tag column. I think the crux of your question relates to being able to filter the rows based on matching a string or set of strings.

<button class="filter" filter="HIGHER EDUCATION,RENOVATION">filter 1</button>

we will use this filter attribute later to split() on , and then match all the whole filter and hide those that do not match.

var filter = $(this).attr("filter").split(",");
  $("table.tg").find("tbody > tr").filter(function(i, r){
    var txt = $(r).find(":last-child").text();  //get the text in the last cell
    var match = filter.every(s=>(new RegExp(s)).test(txt)); //does the text match all the filters?
    return !match;  //if it doesnt match return it to be filtered (hidden)
  }).hide();

$("button.filter").on("click", function(e){
  //show all hidden rows
  $("table.tg").find("tbody > tr").show();
  //split the filter attribute into an array by commas
  var filter = $(this).attr("filter").split(",");
  $("table.tg").find("tbody > tr").filter(function(i, r){
    var txt = $(r).find(":last-child").text();  //get the text in the last cell
    var match = filter.every(s=>(new RegExp(s.trim())).test(txt)); //does the text match all the filters?  trimmed just in-case
    return !match;  //if it doesnt match return it to be filtered (hidden)
  }).hide();
});

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="filter" filter="HIGHER EDUCATION,RENOVATION">filter 1</button>
<button class="filter" filter="HIGHER EDUCATION,SCHOOLS-COLLEGE">filter 2</button>
<button class="filter" filter="">reset</button>
<table class="tg">
<thead>
  <tr>
    <th class="tg-0pky">ID</th>
    <th class="tg-0pky">Name</th>
    <th class="tg-0pky">Tags</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-0pky">1</td>
    <td class="tg-0pky">Test1</td>
    <td class="tg-0pky">AIRPORT TERMINAL,AVIATION,HANGAR,MAINTENANCE BUILDING,NEW CONSTRUCTION,OFFICE</td>
  </tr>
  <tr>
    <td class="tg-0pky">2</td>
    <td class="tg-0pky">Test2</td>
    <td class="tg-0pky">HIGHER EDUCATION,OFFICE,RENOVATION,SCHOOLS-COLLEGE</td>
  </tr>
  <tr>
    <td class="tg-0pky">3</td>
    <td class="tg-0pky">Test3</td>
    <td class="tg-0pky">HIGHER EDUCATION,REMODEL,SCHOOLS-COLLEGE</td>
  </tr>
  <tr>
    <td class="tg-0pky">4</td>
    <td class="tg-0pky">Test4</td>
    <td class="tg-0pky">APARTMENT,HIGHER EDUCATION,NEW CONSTRUCTION,SCHOOLS - COLLEGE</td>
  </tr>
</tbody>
</table>

Answered By - Steve0