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?

Answer 1

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>