JQuery: Table Row Show/Hide based on row

Question

I have a table that has some row with same value in rows like -

<table>
    <thead>
        <tr>
            <th>Players</th>
            <th>Country</th>
            <th>ZIP Code</th>
        </tr>
    </thead>>
    <tbody>
        <tr>
            <td>Jhon Doe</td>
            <td>USA</td>
            <td>53255343</td>
        </tr>
        <tr>
            <td>Jhon Doe</td>
            <td>USA</td>
            <td>53255343</td>
        </tr>
        <tr>
            <td>Etinee Gomes</td>
            <td>Ghana</td>
            <td>566682</td>
        </tr>
    </tbody>
</table>

I need to show first row of those rows which having same value. In this case first and second row having same data, need to show only first row. If table data (<td>) not same then leave as it. Is it possible using Jquery?

Yeah it's possible. You'd want to loop through each <tr>, perhaps with a $.each() statement in jQuery, and search all the other rows for the value of each <td> to see if they match. Try writing some code yourself and come back here if you run into an issue. — Hayden Schiff
– Hayden Schiff, Commented Nov 21, 2016 at 18:04
This is definitely possible with jquery! You just need to iterate through each of your rows, building up an index - I suggest hashing every value together to one key - and check if this key is already in you index. If so, hide your row. — Michael Hirschler
– Michael Hirschler, Commented Nov 21, 2016 at 18:05
Thanks Michael. I have update my post. Can you please comment with jdfidde example.. — Daniel Smith
– Daniel Smith, Commented Nov 21, 2016 at 18:07

DaniP · Accepted Answer · 2016-11-21 18:17:32Z

2

You can loop through the items of your tbody and look for an if/else condition like this:

var data = []
$('tbody tr').each(function() {
  var trdat = $(this).text().trim();
  if ($.inArray(trdat, data) !== -1) {
    $(this).hide()
  } else {
    data.push(trdat);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Players</th>
      <th>Country</th>
      <th>ZIP Code</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jhon Doe</td>
      <td>USA</td>
      <td>53255343</td>
    </tr>
    <tr>
      <td>Jhon Doe</td>
      <td>USA</td>
      <td>53255343</td>
    </tr>
    <tr>
      <td>Etinee Gomes</td>
      <td>Ghana</td>
      <td>566682</td>
    </tr>
  </tbody>
</table>

answered Nov 21, 2016 at 18:17

DaniP

38.3k9 gold badges68 silver badges74 bronze badges

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

2 Comments

Daniel Smith Over a year ago

Hello DaniP thanx for your answer. If I want also consider some more text to be consider as hide like - here hide <td>Jhon Doe</td> and consider <td>Jhon Doe A</td> also hide, so how to this?

DaniP Over a year ago

@JargoViet I don't get the idea can you clarify with an example on jsfiddle or codepen

Collectives™ on Stack Overflow

JQuery: Table Row Show/Hide based on row

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related