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

所以在第一列中，我们将有{（1}}的两（2）个匹配，w的后三（3）个匹配，{{1}的后三（2）个匹配}，o的第三（3）个匹配，p的第五（2）个匹配以及w的最后三（3）个匹配。

所以我也把标题计算为副本。

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

该表当前显示为

这可行吗？

Answer 1

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

希望它有所帮助。

＆＃13;

$("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) +".");
})

＆＃13;

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

＆＃13;

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

＆＃13;

从表头中的列中查找匹配项

1 个答案: