Find and mark duplicates in HTML Table using jQuery

Question

I have a dynamically generated HTML table. It varies not only the pure content, but also the column names from case to case.

But one thing is in common between all the tables that may arise - there is one, two or all three of the following column names:

Vorname (first name), Nachname (last name), Name (name)

Now I would like to examine these columns for duplicates. There are, however, a chain that I want to try to follow, clearly demonstrate:

"Check all the values in the column first name, last name, name. If one or two of the column do not exist, it can be ignored, and to work with the existing column or columns (for example, only first name and last name).

Are duplicate entries found in the column, these lines get the CSS property 'background-color: yellow ;.

But duplicate values should only be recognized as such when first and last name of the line are the same or even first name and name. Depending on which columns exist.

A small example:

<table>
    <tr>
    <td>John</td>
    <td>Doe</td>
    </tr>
    <tr>
    <td>John</td>
    <td>Mc Doe</td>
    </tr>
    </table>

-> Since only the first (In this example, the first name column) matches (John), but the second column (Last Name or name) is different, is not to be recognized as a duplicate row.

Unfortunately, I'm still not so fit in JavaScript / jQuery, so I need some help from the experts =)

Since you generate the table dynamically you should better prevent the duplicates during the generation. It doesn't make sense putting entries in the table and later removing them on the client side. — cezar
– cezar, Commented Jun 22, 2015 at 16:56
Well this is true, but unfortunately I have no control about the table that's going to be created. I just see that I forgot an information. The table is created with PHP, which reads an .xls file. And the duplicates shouldn't be removed, just highlighted with the yellow background-color. It is important to display the .xls file as an html table without any modification to its data. :-) — hallleron
– hallleron, Commented Jun 22, 2015 at 16:59

aahhaa · Accepted Answer · 2015-06-22 18:48:32Z

1

use $.inArray() it will return -1 if found. you should prob treat name such as do a trim of whitespace, make all lowercase, so it will be compare properly.

var allName = []; 
var dupicateName = []; 

$('td').each(
  function(index, el) {
    var name = $(el).text();
    if(jQuery.inArray(name, allName)===-1) {
      allName.push(name);
    } else {
      dupicateName.push(name);
    }    
  }
);

console.log(dupicateName);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
    <td>John</td>
    <td>Doe</td>
    </tr>
    <tr>
    <td>John</td>
    <td>Mc Doe</td>
    </tr>
    </table>
<hr/>

edited Jun 22, 2015 at 18:48

answered Jun 22, 2015 at 18:41

aahhaa

2,2713 gold badges20 silver badges31 bronze badges

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

Comments

Tomalak · Accepted Answer · 2015-06-22 19:06:51Z

0

How about:

function highlightDuplicateRows(selector) {
    var index = {},
    getText = function () {
        return $.trim( $(this).text() );
    };
    $(selector).find("tr").each(function (tr) {
        var rowKey = $(this).find("td").map(getText).toArray().join("|");
        if (index.hasOwnProperty(rowKey)) {
            index[rowKey].push(this);
        } else {
            index[rowKey] = [this];
        }
    });
    $.each(index, function (rowKey, rows) {
        $(rows).toggleClass("highlight", rows.length > 1);
    });
}

highlightDuplicateRows("#test");

.highlight {
    background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
    <tr>
        <td>John</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Mc Doe</td>
    </tr>
</table>

answered Jun 22, 2015 at 19:06

Tomalak

339k68 gold badges547 silver badges635 bronze badges

1 Comment

hallleron Over a year ago

Well, it is "kind of working"... the only thing that is missing is the fact, that the table should only be checked for duplicate values in the columns "Vorname", "Nachname" or "Name". Because there are other columns that have the same values, but they shouldn't be checked for duplicate values. And like I said , in some tables that are being generated, there may be just one, two or all three of the columns that matter.

Collectives™ on Stack Overflow

Find and mark duplicates in HTML Table using jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related