jQuery : hide rows in table based on column data

Question

I have a simple HTML Table and it has a HTML button underneath it as shown below.

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>A</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>C</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>C</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<button type="button">Hide A</button>

Is it possible to do hide all rows that belong to Company A when I click on that button ?

I know I can hide elements using $(selector).hide() but I am not sure how I can select/hide only certain rows based on some value ?

what have you tried to achieve it?

messerbill
– messerbill

2018-03-01 22:34:00 +00:00
Commented Mar 1, 2018 at 22:34 — messerbill
– messerbill, Commented Mar 1, 2018 at 22:34

Codegenic · Accepted Answer · 2018-03-01 22:43:52Z

1

Based only on the provided sample html. Within your click handler, using the correct selector to find the first td of each tr and then looping over each to perform decision logic would work:

$("tr td:first-child").each(function(index){
    if($(this).text() === "A") {
        $(this).closest("tr").hide();
    }
});

answered Mar 1, 2018 at 22:43

Codegenic

616 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JanR · Accepted Answer · 2018-03-01 22:43:01Z

1

add a class to each row with a company identifier:

 <tr class="company-a">
    <td>A</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>

Then in your jQuery you can go something like:

$('.company-a').hide()

I have added a fiddle to show how this could work: https://jsfiddle.net/qmrkdesf/6/

answered Mar 1, 2018 at 22:43

JanR

6,1303 gold badges25 silver badges30 bronze badges

Comments

Jeto · Accepted Answer · 2018-03-01 22:43:08Z

You can do the following:

(Note that selecting elements by their tag names is bad practice. You should add some data attributes instead, and then use $('[data-my-table]') and such.)

$(function() {
  $('button').on('click', () => {
    $('table td:first-child')
      .filter((_, cell) => $(cell).text() === 'A')
      .closest('tr')
      .hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>A</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>C</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>C</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<button type="button">Hide A</button>

</body>
</html>

Collectives™ on Stack Overflow

jQuery : hide rows in table based on column data

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related