0

So I'm trying to make a script that find matches in the column based on its header. So that I can easily have an overview of all duplicates in the table. The original table is gigantic and counting by hand has not been very successful. Below is an example

Lets say that the table looks like this: (the same, except for the amount of rows and columns)

+---+---+---+---+---+---+
| w | o | p | w | g | h |
+---+---+---+---+---+---+
| p | k | m | n | r | b |
| h | p | x | v | b | e |
| w | r | q | b | h | h |
| u | o | t | w | h | s |
| a | o | p | w | g | h |
+---+---+---+---+---+---+

So in the first column, we would have two (2) matches of w, and in the second three (3) matches of o, the third two (2) of p, fourth three (3) matches of w, fifth two (2) of g and in the last three (3) matches of h.

So I'm also counting the header as a duplicate.

I have found this snippet, but it finds duplicates in the whole table, I just want to find duplicates in the same column.

The table is currently being display as

<table border="1" style="width:100%; border: 1;">
    <tr>
      <th>w</th>
      <th>o</th>
      <th>p</th>
      <th>w</th>
      <th>g</th>
      <th>h</th>
   </tr>

   <tr>
     <td>p</td>
     <td>k</td>
     <td>m</td>
     <td>n</td>
     <td>r</td>
     <td>b</td>
   </tr>
   <tr>
     <td>h</td>
     <td>p</td>
     <td>x</td>
     <td>v</td>
     <td>b</td>
     <td>e</td>
   </tr>
   <tr>
     <td>w</td>
     <td>r</td>
     <td>q</td>
     <td>b</td>
     <td>h</td>
     <td>h</td>
   </tr>
   <tr>
     <td>u</td>
     <td>o</td>
     <td>t</td>
     <td>w</td>
     <td>h</td>
     <td>s</td>
   </tr>
   <tr>
     <td>a</td>
     <td>o</td>
     <td>p</td>
     <td>w</td>
     <td>g</td>
     <td>h</td>
   </tr>
</table>

Is this doable?

Adam
  • 1,231
  • 1
  • 13
  • 37
  • Possible duplicate of [How can I get the corresponding table header (th) from a table cell (td)?](https://stackoverflow.com/questions/3523770/how-can-i-get-the-corresponding-table-header-th-from-a-table-cell-td) Use this and just implement a duplicate detector. – msanford Oct 25 '17 at 17:26

1 Answers1

1

I'm doing two checks, and because it's a logical AND (using the &&), if the first fails, the second never processes. I check all TD's, but the first check is, is it in the same column as the clicked header? Secondly, I check if the text content of the given TD matches the text content of the chosen TH. If they match, they will be highlighted. Otherwise, in every case (not matching text or wrong column) any highlight classes will be removed.

Hope it helps.

$("th").on("click", function(){
  // First, highlight the TH el that's been clicked, and
  //  remove highlight on all other TH els.
  $(this).addClass("highlight").siblings().removeClass("highlight");
  var colIndex = $(this).index();
  var colText = $(this).text();
  var matchCount = 0;
  
 $("td").each(function(){
   // For every TD, we want to check two things: is it in the same
   //   column as was clicked, and then does its text match the
   //   clicked TH el text? If so, highlight it. Otherwise, remove
   //   any highlight it may have.
   if($(this).index() == colIndex && $(this).text() == colText ) {
     $(this).addClass("highlight");
     matchCount ++;
   } else {
     $(this).removeClass("highlight")
   }
 })
 
 console.log("There were "+matchCount+" matches for "+colText+" in column "+(colIndex+1) +".");
})
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}
th {
  height: 40px;
  background-color: #ccc;
}
tr {
  height: 20px;
}
th, td {
  width: 25px;
}
.highlight {
  font-size: 18pt;
  font-weight: 800;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" style="width:100%; border: 1;">
    <tr>
      <th>w</th>
      <th>o</th>
      <th>p</th>
      <th>w</th>
      <th>g</th>
      <th>h</th>
   </tr>

   <tr>
     <td>p</td>
     <td>k</td>
     <td>m</td>
     <td>n</td>
     <td>r</td>
     <td>b</td>
   </tr>
   <tr>
     <td>h</td>
     <td>p</td>
     <td>x</td>
     <td>v</td>
     <td>b</td>
     <td>e</td>
   </tr>
   <tr>
     <td>w</td>
     <td>r</td>
     <td>q</td>
     <td>b</td>
     <td>h</td>
     <td>h</td>
   </tr>
   <tr>
     <td>u</td>
     <td>o</td>
     <td>t</td>
     <td>w</td>
     <td>h</td>
     <td>s</td>
   </tr>
   <tr>
     <td>a</td>
     <td>o</td>
     <td>p</td>
     <td>w</td>
     <td>g</td>
     <td>h</td>
   </tr>
</table>
Snowmonkey
  • 3,716
  • 1
  • 16
  • 16