CODEWITHSUNDEEP
javascripthtml-table
MnZ
MnZ

Reputation: 207

Unique rows in HTML using Javascript

I'm trying to display unique rows based on values of the first column.I have tried this a lot taking cue from a similar question.

    <table id="test" border="1">
    <tr>
        <td>test1</td>
        <td>test2</td>
        <td>test3</td>
    </tr>
      <tr>
          <td>test1</td>
          <td>test2</td>
          <td>test5</td>
    </tr>
    <tr>
        <td>test6</td>
        <td>test2</td>
        <td>test5</td>
    </tr>
      <tr>
              <td>test6</td>
              <td>test6</td>
              <td>test9</td>
        </tr>
    </table

>

 **BEFORE**

 test1  test2   test3
 test1  test2   test5
 test6  test2   test5
 test6  test6   test9

 **AFTER**

 test1  test2   test3  
 test6  test2   test5

Here's what I have tried using codes from a similar situation

     arr = [];
     $('#test td').each(function(){
        key = "" + $(this).index(); 
    
       if(arr.indexOf( key ) == 1)
           arr.push($.trim($(this).text()));
       else
        $(this).closest('tr').hide();    
      alert(arr[]);
      });

  **RESULT**:      

  test1 test2   test3

Upvotes: 3

Views: 1863

Answers (2)

Alex K.
Alex K.

Reputation: 175826

Loop each first td adding the value to a lookup object if its not not already present. If it is present, hide the current row.

var found = {};
    $('#test td:first-child').each(function(){
       var td = $(this);
       var value = td.text();
       if (found[value])
          td.closest('tr').hide();
       else
          found[value] = true;
    });


var found = {};
    $('#test td:first-child').each(function(){
       var td = $(this);
       var value = td.text();
       if (found[value])
          td.closest('tr').hide();
       else
          found[value] = true;
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <table id="test" border="1">
    <tr>
        <td>test1</td>
        <td>test2</td>
        <td>test3</td>
    </tr>
      <tr>
          <td>test1</td>
          <td>test2</td>
          <td>test5</td>
    </tr>
    <tr>
        <td>test6</td>
        <td>test2</td>
        <td>test5</td>
    </tr>
    <tr>
        <td>test6</td>
        <td>test6</td>
        <td>test9</td>
    </tr>
    </table>

Upvotes: 2

dfsq
dfsq

Reputation: 193261

You can also use filter to find rows to remove:

$('#test tr').filter(function() {
    var text = $(this.cells[0]).text();
    return $(this).prev('tr').filter(function() {
        return $(this.cells[0]).text() === text;
    }).length;
}).remove();


$('#test tr').filter(function() {
    var text = $(this.cells[0]).text();
    return $(this).prev('tr').filter(function() {
        return $(this.cells[0]).text() === text;
    }).length;
}).remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test" border="1">
    <tr>
        <td>test1</td>
        <td>test2</td>
        <td>test3</td>
    </tr>
    <tr>
        <td>test1</td>
        <td>test2</td>
        <td>test5</td>
    </tr>
    <tr>
        <td>test6</td>
        <td>test2</td>
        <td>test5</td>
    </tr>
    <tr>
        <td>test6</td>
        <td>test6</td>
        <td>test9</td>
    </tr>
</table>

Upvotes: 1

Related Questions