jquery filtering using .indexOf() table based a 2 parameters

ShaneS
November 26, 2022
201 views
1 vote
2 Answers

I have a large table something like this below. I want to filter the table by Office and Month. I was thinking to do this I would some how use .indexOf() twice. I tried to do this in different ways and did not figure it out.

Office	Name	Month	Sales
1a	Abe D	Jan	10
1a	Abe D	Feb	13
1a	Abe D	Mar	11
1a	Abe D	Apr	12
1a	Jon R	Jan	9
1a	Jon R	Feb	12
1a	Jon R	Mar	9
1a	Jon R	Apr	13
2b	Eve C	Jan	13
2b	Eve C	Feb	14
2b	Eve C	Mar	13
2b	Eve C	Apr	15

This is what I tried.

    let office = "1a";
    let mth = "Jan";
    $("#Table2 tbody tr").filter(function() {
    let step1 = $(this).toggle($(this).text().indexOf(office) > -1);
    $(step1).toggle($(step1).text().indexOf(mth) > -1);
    });

The code does not yield what I want. Below is what I want the output to be.

Office	Name	Month	Sales
1a	Abe D	Jan	10
1a	Jon R	Jan	9

thank you

Tags: jquery

Answers

Here’s how I would do it.

let drpOffice = $('#drpOffice');
let drpMonth = $('#drpMonth');
let trs = $("#Table2 tbody tr");

function filterTable() {
  trs.show();
  trs.each(function() {
    let tr = $(this);
    let officeVal = tr.find('td:nth-child(1)').text();
    let monthVal = tr.find('td:nth-child(3)').text();

    if (officeVal !== drpOffice.val() || monthVal !== drpMonth.val()) {
      tr.hide();
    }
  });
}

$(window).on('load', filterTable);
drpOffice.on('change', filterTable);
drpMonth.on('change', filterTable);

button {
  margin-bottom: 10px;
}
table {
  border-collapse: collapse;
}
thead {
  background-color: lightgrey;
}
th, td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="#drpOffice">Office</label>
<select id="drpOffice">
  <option>1a</option>
  <option>2b</option>
</select>

<label for="#drpMonth">Month</label>
<select id="drpMonth">
  <option>Jan</option>
  <option>Feb</option>
  <option>Mar</option>
  <option>Apr</option>
  <option>May</option>
  <option>Jun</option>
  <option>Jul</option>
  <option>Aug</option>
  <option>Sep</option>
  <option>Dec</option>
  <option>Oct</option>
  <option>Dec</option>
</select>

<table id="Table2">
  <thead>
    <tr><th>Office</th><th>Name</th><th>Month</th><th>Sales</th></tr>
  </thead>
  <tbody>
    <tr><td>1a</td><td>Abe D</td><td>Jan</td><td>10</td></tr>
    <tr><td>1a</td><td>Abe D</td><td>Feb</td><td>13</td></tr>
    <tr><td>1a</td><td>Abe D</td><td>Mar</td><td>11</td></tr>
    <tr><td>1a</td><td>Abe D</td><td>Apr</td><td>12</td></tr>
    <tr><td>1a</td><td>Jon R</td><td>Jan</td><td>9</td></tr>
    <tr><td>1a</td><td>Jon R</td><td>Feb</td><td>12</td></tr>
    <tr><td>1a</td><td>Jon R</td><td>Mar</td><td>9</td></tr>
    <tr><td>1a</td><td>Jon R</td><td>Apr</td><td>13</td></tr>
    <tr><td>2b</td><td>Eve C</td><td>Jan</td><td>13</td></tr>
    <tr><td>2b</td><td>Eve C</td><td>Feb</td><td>14</td></tr>
    <tr><td>2b</td><td>Eve C</td><td>Mar</td><td>13</td></tr>
    <tr><td>2b</td><td>Eve C</td><td>Apr</td><td>15</td></tr>
  </tbody>
</table>

@JosephWebber already provided a good solution based on jQuery. Here is another one in Vanilla JavaScript.

const sels=["drpOffice","drpMonth"].map(id=>document.getElementById(id));
const trs = [...document.querySelectorAll("#Table2 tbody tr")];

function filterTable() {
 const [off,mon]=sels.map(s=>s.value);
 trs.forEach(tr=>tr.style.display=(!off||tr.children[0].textContent==off)&&(!mon||tr.children[2].textContent==mon)?"":"none");
}

window.onload=filterTable;
sels.forEach(s=>s.addEventListener('change', filterTable));

button {
  margin-bottom: 10px;
}
table {
  border-collapse: collapse;
}
thead {
  background-color: lightgrey;
}
th, td {
  border: 1px solid black;
}

<label for="#drpOffice">Office</label>
<select id="drpOffice">
  <option></option>
  <option>1a</option>
  <option>2b</option>
</select>

<label for="#drpMonth">Month</label>
<select id="drpMonth">
  <option></option>
  <option>Jan</option>
  <option>Feb</option>
  <option>Mar</option>
  <option>Apr</option>
  <option>May</option>
  <option>Jun</option>
  <option>Jul</option>
  <option>Aug</option>
  <option>Sep</option>
  <option>Dec</option>
  <option>Oct</option>
  <option>Dec</option>
</select>

<table id="Table2">
  <thead>
    <tr><th>Office</th><th>Name</th><th>Month</th><th>Sales</th></tr>
  </thead>
  <tbody>
    <tr><td>1a</td><td>Abe D</td><td>Jan</td><td>10</td></tr>
    <tr><td>1a</td><td>Abe D</td><td>Feb</td><td>13</td></tr>
    <tr><td>1a</td><td>Abe D</td><td>Mar</td><td>11</td></tr>
    <tr><td>1a</td><td>Abe D</td><td>Apr</td><td>12</td></tr>
    <tr><td>1a</td><td>Jon R</td><td>Jan</td><td>9</td></tr>
    <tr><td>1a</td><td>Jon R</td><td>Feb</td><td>12</td></tr>
    <tr><td>1a</td><td>Jon R</td><td>Mar</td><td>9</td></tr>
    <tr><td>1a</td><td>Jon R</td><td>Apr</td><td>13</td></tr>
    <tr><td>2b</td><td>Eve C</td><td>Jan</td><td>13</td></tr>
    <tr><td>2b</td><td>Eve C</td><td>Feb</td><td>14</td></tr>
    <tr><td>2b</td><td>Eve C</td><td>Mar</td><td>13</td></tr>
    <tr><td>2b</td><td>Eve C</td><td>Apr</td><td>15</td></tr>
  </tbody>
</table>

Please signup or login to give your own answer.

Click here to cancel reply.