Remove duplicate cells of a column

Question

I want to remove duplicate cells of a column.

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

output
------
test1        test2        test3    
test4        test2        test5    
test6        test2        test9    
test6        test8        test9    


I want in this format
---------------------
test1        test2        test3    
test4                     test5     
test6                     test9    
             test8

What have you tried so far and what specifically are you having problems with? What is your question actually? — Felix Kling, Nov 22 '12 at 10:27
you're probably best not to *remove* the cells, just empty them. Removing cells from a table would get messy. real quick. — ahren, Nov 22 '12 at 10:28
why people are downvoting without understanding the question???? I could have done it on my own if it was that simple — Ulhas Tuscano, Nov 22 '12 at 10:56
@Tuscan: Probably because you did not show *any* attempt to solve the problem yourself. And to be honest, you did not even ask a question, you just stated what you want. I want a Unicorn. — Felix Kling, Nov 22 '12 at 10:58
I think the problem is an interesting one, but the question could be improved. I suggest you edit your question, explain your problem properly and provide a better (and maybe more concise) example. — Felix Kling, Nov 22 '12 at 11:19

Felix Kling · Accepted Answer · 2012-11-22T11:15:34.703

3

This only removes duplicate text across columns. It works because elements are selected in document order:

var seen = {};
$('#test td').each(function() {
    // Encode column and content information.
    var key =  $(this).index() +  $(this).text();
    if (seen[key]) {
        $(this).text('');
    }
    else {
        seen[key] = true;
    }
});

It probably won't work though if you have cells spanning multiple columns.

Slightly adjusted DEMO.

Update: For consecutive cells only. The idea is to keep track of the previous value that was seen in one column.

var seen = {};
$('#test td').each(function() {
    var index =  $(this).index();
    var txt = $(this).text();
    if (seen[index] === txt) {
        $(this).text('');
    }
    else {
        seen[index] = txt;
    }
});

DEMO (note test5 in the right column)

edited Nov 22 '12 at 11:15

answered Nov 22 '12 at 10:52

Felix Kling

795,719
175
1,089
1,143

Thanx but if there is a mismatch between 2 cells of a column then it should not clear the next cell of the column. e.g if i put test1 in 1st column of 3rd row then it should not be cleared as 1st column of 2nd is mismatched. I am extremely sorry for not explaining the question correctly – Ulhas Tuscano Nov 22 '12 at 11:10
So you only want to clear *consecutive* cells... yes, it would really have helped if you provided an example which clearly shows what you want to achieve. – Felix Kling Nov 22 '12 at 11:11

Adil · Answer 2 · 2012-11-22T11:19:37.077

1

You can try some thing like this,

Live Demo

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

edited Nov 22 '12 at 11:19

answered Nov 22 '12 at 10:36

Adil

146,340
25
209
204

if i put test1 in last column of last row then it should not be removed – Ulhas Tuscano Nov 22 '12 at 10:53
This removes duplicates across rows now, not columns. – Felix Kling Nov 22 '12 at 11:02

score 1 · Answer 3 · edited May 23 '17 at 12:12

You can use this pattern here.

jsFiddle here.

var seen = {};
$('#removeDupes').on('click', function(){
    $('#test tr td').each(function() {
        var txt = $(this).text();
        var index = $(this).parent('tr').children('td').index(this);
        if (!seen[index]){
            seen[index] = new Array();
        }

        if (seen[index][txt]) {
            $(this).html('&nbsp;');
        }
        else {
            seen[index][txt] = true;
        }
    });
});

Note that your </td> elements aren't closed off correctly, and as per ahren's comment, removing the td entirely can result in alignment issues.

This would remove duplicate elements anywhere in the table, not only across rows. — Felix Kling, Nov 22 '12 at 10:47

Remove duplicate cells of a column

3 Answers3