Locate an element by filtering and finding two distinct values using the .eq() method

Question

Locate an element by filtering and finding two distinct values using the .eq() method

I need help filtering a table row based on the values in two different columns. The idea is to show only the row where one column has "value1" and another column has "value2", while hiding all other rows. If none of the rows meet this condition, then hide them all.

Below is the jQuery code I have tried so far:

var firstDropVal = $('#first .fstselected').text(); // Value from the first dropdown
var secondDropVal = $('#second .fstselected').text(); // Value from the second dropdown

// 'rows' is the class of the table rows (tr)
var $rowsNo = $('.rows').filter(function() {
  return $.trim($(this).find('td:visible').eq(0 && 1).text()) !== firstDropVal && secondDropVal
}).hide();

This is the HTML code for my table:

while($row = mysqli_fetch_array($result)) {

$i++;

 echo "
<tr class='rows' id='rows".$i."'>
<td name='rows".$i."' id='hersteller".$i."' class='text-left'>".$row['Hersteller']."</td>
<td id='artikel".$i."' class='text-left'>".$row['Artikel']."</td>
<td id='mase".$i."' class='text-left'>".$row['Mase']."</td>
<td id='stuecke".$i."' class='text-left'>".$row['Stuecke']."</td>
<td id='herstellerkurz".$i."' class='text-left'>".$row['HerstellerKurz']."</td>
<td id='masekurz".$i."' class='text-left'>".$row['MaseKurz']."</td>
<td id='farbekurz".$i."' class='text-left'>".$row['FarbeKurz']."</td>
<td id='artikelnummer".$i."' class='text-left'>".$row['Artikelnummer']."</td>
</tr>

 ";

javascript jquery html css ajax

Answer 1

Answer №1

To simplify the sample, I opted to create a table with only 2 columns. You have the option to hide() all rows and then filter() based on dropdown selection.

$(".filter").change(function() {
  var color = $("#filter-color").val().trim();
  var number = $("#filter-number").val().trim();

  $(".row").hide().filter(function() {
    return (
      color === "" ||
      color === $(this).find("td:eq(0)").text().trim()
    ) && (
      number === "" ||
      number === $(this).find("td:eq(1)").text().trim()
    )
  }).show();

});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, tr {
  border : 1px solid black;
}

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

<select id="filter-color" class="filter">
  <option value=""></option>
  <option value="red">red</option>
  <option value="green">green</option>
  <option value="blue">blue</option>
</select>

<select id="filter-number" class="filter">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<hr />

<table>
  <tr>
    <th>Color</th>
    <th>Number</th>
  </tr>
  <tr class="row">
    <td>red</td>
    <td>2</td>
  </tr>
  <tr class="row">
    <td>green</td>
    <td>1</td>
  </tr>
  <tr class="row">
    <td>blue</td>
    <td>3</td>
  </tr>
  <tr class="row">
    <td>red</td>
    <td>3</td>
  </tr>
  <tr class="row">
    <td>blue</td>
    <td>2</td>
  </tr>
  <tr class="row">
    <td>green</td>
    <td>1</td>
  </tr>
</table>

Alternatively, you can utilize the every() method to check the array values for precise filtering.

$(".filter").change(function() {

  var filters = [                    //Store filter values in an array format to match table data order
    $("#filter-color").val().trim(),
    $("#filter-number").val().trim()
  ];

  $(".row").hide().filter(function() {
    return $(this).find("td").get().every(function(o, i) {
      return $(o).text().trim() === filters[i] || filters[i] == "";
    });
  }).show();

});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
tr {
  border: 1px solid black;
}

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

<select id="filter-color" class="filter">
  <option value=""></option>
  <option value="red">red</option>
  <option value="green">green</option>
  <option value="blue">blue</option>
</select>

<select id="filter-number" class="filter">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<hr />

<table>
  <tr>
    <th>Color</th>
    <th>Number</th>
  </tr>
  <tr class="row">
    <td>red</td>
    <td>2</td>
  </tr>
  <tr class="row">
    <td>green</td>
    <td>1</td>
  </tr>
  <tr class="row">
    <td>blue</td>
    <td>3</td>
  </tr>
  <tr class="row">
    <td>red</td>
    <td>3</td>
  </tr>
  <tr class="row">
    <td>blue</td>
    <td>2</td>
  </tr>
  <tr class="row">
    <td>green</td>
    <td>1</td>
  </tr>
</table>

Answer 2

To simplify the sample, I opted to create a table with only 2 columns. You have the option to hide() all rows and then filter() based on dropdown selection.

$(".filter").change(function() {
  var color = $("#filter-color").val().trim();
  var number = $("#filter-number").val().trim();

  $(".row").hide().filter(function() {
    return (
      color === "" ||
      color === $(this).find("td:eq(0)").text().trim()
    ) && (
      number === "" ||
      number === $(this).find("td:eq(1)").text().trim()
    )
  }).show();

});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, tr {
  border : 1px solid black;
}

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

<select id="filter-color" class="filter">
  <option value=""></option>
  <option value="red">red</option>
  <option value="green">green</option>
  <option value="blue">blue</option>
</select>

<select id="filter-number" class="filter">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<hr />

<table>
  <tr>
    <th>Color</th>
    <th>Number</th>
  </tr>
  <tr class="row">
    <td>red</td>
    <td>2</td>
  </tr>
  <tr class="row">
    <td>green</td>
    <td>1</td>
  </tr>
  <tr class="row">
    <td>blue</td>
    <td>3</td>
  </tr>
  <tr class="row">
    <td>red</td>
    <td>3</td>
  </tr>
  <tr class="row">
    <td>blue</td>
    <td>2</td>
  </tr>
  <tr class="row">
    <td>green</td>
    <td>1</td>
  </tr>
</table>

Alternatively, you can utilize the every() method to check the array values for precise filtering.

$(".filter").change(function() {

  var filters = [                    //Store filter values in an array format to match table data order
    $("#filter-color").val().trim(),
    $("#filter-number").val().trim()
  ];

  $(".row").hide().filter(function() {
    return $(this).find("td").get().every(function(o, i) {
      return $(o).text().trim() === filters[i] || filters[i] == "";
    });
  }).show();

});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
tr {
  border: 1px solid black;
}

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

<select id="filter-color" class="filter">
  <option value=""></option>
  <option value="red">red</option>
  <option value="green">green</option>
  <option value="blue">blue</option>
</select>

<select id="filter-number" class="filter">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<hr />

<table>
  <tr>
    <th>Color</th>
    <th>Number</th>
  </tr>
  <tr class="row">
    <td>red</td>
    <td>2</td>
  </tr>
  <tr class="row">
    <td>green</td>
    <td>1</td>
  </tr>
  <tr class="row">
    <td>blue</td>
    <td>3</td>
  </tr>
  <tr class="row">
    <td>red</td>
    <td>3</td>
  </tr>
  <tr class="row">
    <td>blue</td>
    <td>2</td>
  </tr>
  <tr class="row">
    <td>green</td>
    <td>1</td>
  </tr>
</table>

Answer 3

Answer №2

It seems like the approach you're taking with these functions is not yielding the desired results.

.eq(0 && 1)
firstDropVal && secondDropVal

This issue stems from operator precedence, which you can read more about here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

To address this, you will need to conduct four separate tests (though there are alternative methods, this is essentially what you'll be doing).

return 
    $.trim($(this).find('td:visible').eq(0).text()) === firstDropVal
    || $.trim($(this).find('td:visible').eq(1).text()) === secondDropVal
    || $.trim($(this).find('td:visible').eq(0).text()) === firstDropVal
    || $.trim($(this).find('td:visible').eq(1).text()) === secondDropVal

Answer 4

It seems like the approach you're taking with these functions is not yielding the desired results.

.eq(0 && 1)
firstDropVal && secondDropVal

This issue stems from operator precedence, which you can read more about here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

To address this, you will need to conduct four separate tests (though there are alternative methods, this is essentially what you'll be doing).

return 
    $.trim($(this).find('td:visible').eq(0).text()) === firstDropVal
    || $.trim($(this).find('td:visible').eq(1).text()) === secondDropVal
    || $.trim($(this).find('td:visible').eq(0).text()) === firstDropVal
    || $.trim($(this).find('td:visible').eq(1).text()) === secondDropVal

Locate an element by filtering and finding two distinct values using the .eq() method

Answer №1

Answer №2

Similar questions

Setting the width of colspan elements can be challenging when other columns have dynamic widths

Next.js is constantly encountering an issue where it throws an error stating "params

Interceptors in axios do not trigger when making requests through a PHP proxy

Resetting the positions of images can be done by following these

The destroy method of Chart.js does not appear to have any impact on the

Why is it that masonry is typically arranged in a single column with overlapping

Constructing markup for text and subtext in a meaningful manner

Updating an element in jQuery using the .each() method

Transitioning between javascript functions

Vuejs is throwing an error claiming that a property is undefined, even though the

JavaScript: Leveraging arrays as key values

Is the ajax success function failing to work properly in JavaScript?

You cannot use css() in conjunction with appendTo()

Using Axios to fetch data and populating select dropdown options in a Vue component

` Time Running Out: A Classy Countdown Timer`

SVG to create a gradient mask that appears transparent

Error loading CSS file: 'Invalid MIME type detected, expecting text/css'

Using the .slider class on concealed div elements

Guide to dynamically displaying location data using JSON string on Google Maps in ASP.NET

The click function is malfunctioning for the second time