Removing duplicate rows in html table based on a one column

Question

<table id="test" border="1">
    <tr>
        <td>test1<td>
        <td>00.00.00<td>
    </tr> 
    <tr>
        <td>test2<td>
        <td>00.00.00<td>
    </tr>
    <tr>
        <td>test1<td>
        <td>00.00.01<td>
    </tr>
    <tr>
        <td>test2<td>
        <td>00.00.01<td>
    </tr> 
</table>


<script type="text/javascript" >
var seen = {};
    $('table tr ').each(function() {
       var txt = $(this).text();
       if (seen[txt]) $(this).remove();
       else seen[txt] = true;
    });
</script>

I tried it with the above jquery script but it fails for this scenario. I would like to remove duplicates only based on the first column. any suggestions on this, please?

msapkal · Accepted Answer · 2013-04-11 10:01:11Z

2

var arr = $("#test tr");

$.each(arr, function(i, item) {
    var currIndex = $("#test tr").eq(i);
    var matchText = currIndex.children("td").first().text();
    $(this).nextAll().each(function(i, inItem) {
        if(matchText===$(this).children("td").first().text()) {
            $(this).remove();
        }
    });
});

DEMO

answered Apr 11, 2013 at 10:01

msapkal

8,3462 gold badges34 silver badges48 bronze badges

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

Comments

Barmar · Accepted Answer · 2013-04-11 09:45:43Z

1

Change:

var txt = $(this).text();

to:

var txt = $("td:first-child", $(this)).text();

FIDDLE

edited Apr 11, 2013 at 9:45

answered Apr 11, 2013 at 9:37

Barmar

789k57 gold badges554 silver badges669 bronze badges

Comments

Kevin Bowersox · Accepted Answer · 2013-04-11 09:51:12Z

1

Use the map() function to create an array of objects containing the value and the element. Iterate through this array comparing each value to other values in the array, removing the tr elements when duplicates are encountered.

It should also be noted that the html has several unclosed td tags

Javascript

var values = $("#test tr td:first").map(function(){
    return {e: this, val: $(this).html()};
});

$.each(values, function(i,e){
    $.each(values,function(ind,el){
        if(el.val == e.val){
           $(el.e).parents("tr").remove();
        }
    });
});

HTML

<table id="test" border="1">
<tr>
    <td>test1</td>
    <td>00.00.00</td>
</tr> 
<tr>
    <td>test2</td>
    <td>00.00.00</td>
</tr>
<tr>
    <td>test1</td>
    <td>00.00.01</td>
</tr>
<tr>
    <td>test2</td>
    <td>00.00.01</td>
</tr> 
</table>

Working Example http://jsfiddle.net/p72BB/3/

edited Apr 11, 2013 at 9:51

answered Apr 11, 2013 at 9:37

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

3 Comments

Barmar Over a year ago

You have duplicate test2 row.

Kevin Bowersox Over a year ago

@Barmar Thanks I misunderstood the question

Barmar Over a year ago

Your fiddle still isn't working. Change :first to :first-child. You're only selecting the first TD in the table, not the first TD on each row.

Collectives™ on Stack Overflow

Removing duplicate rows in html table based on a one column

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related