JQuery:表行显示/隐藏基于行

时间:2016-11-21 18:01:27

标签: javascript jquery html css

我有一个表,行中的行具有相同的值,如 -

<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>

我需要显示那些具有相同值的行的第一行。在这种情况下,第一行和第二行具有相同的数据,只需要显示第一行。如果表数据(<td>)不相同,则保留原样。是否可以使用Jquery?

1 个答案:

答案 0 :(得分:2)

您可以遍历tbody的项目并查找if / else条件,如下所示:

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>