从表头的列中查找匹配项

Question

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

假设表格看起来像这样：（相同，除了行数和列数）

+---+---+---+---+---+---+
| 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，第三个两 (2) 个 p，第四个三 ( 3) w 的比赛，g 的前两 (2) 场比赛以及 h 的最后三 (3) 场比赛。

所以我也将标题算作重复。

我找到了这个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

我正在做两次检查，因为它是逻辑与（使用 &&），如果第一次失败，第二次永远不会处理。我检查了所有 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>