javascript - 在表标题的列中查找匹配项

Question

所以我试图制作一个脚本，根据标题在列中查找匹配项。这样我就可以轻松地了解表中所有重复项的概览。原来的 table 很大，手工计数不太成功。下面是一个例子

假设表格如下所示:(相同，除了行数和列数)

+---+---+---+---+---+---+
| 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 |
+---+---+---+---+---+---+

因此，在第一列中，我们将有两 (2) 个 w 匹配项，在后三 (3) 个 o 匹配项中，第三个 ( p 的 2) 个，w 的第四个三 (3) 匹配，g 的第五个两 (2) 以及最后三 (3) 个匹配h 的匹配。

所以我也将 header 算作重复项。

我找到了这个snippet ，但它在整个表中找到重复项，我只想在同一列中查找重复项。

该表当前显示为

<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>

这可行吗？

Answer 1

我正在进行两次检查，因为它是逻辑 AND(使用 &&)，如果第一个检查失败，则第二个检查永远不会处理。我检查了所有 TD，但首先检查的是，它是否与单击的标题位于同一列中？其次，我检查给定 TD 的文本内容是否与所选 TH 的文本内容匹配。如果它们匹配，它们将被突出显示。否则，在每种情况下(不匹配文本或错误列)任何突出显示类都将被删除。

希望有帮助。

$("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>