javascript - 将每列中的重复值替换为 null

Question

我有一个与此类似的 html 表

我想要替换前两列中的所有重复值，并将其替换为空即类似于此的输出

添加了以下 html 代码以供引用

table, th, td {
   border: 1px solid black;
}
table {
    border-collapse: collapse;
}

<table >
   <thead>
      <tr >
         <th>ABBEY     </th>
         <th>ANX   </th>
         <th>TPIN</th>
         <th>ACP</th>
         <th>4</th>
         <th>3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>ABNAMRO   </td>
         <td>ANW   </td>
         <td>TPIN</td>
         <td>ACP</td>
         <td>32</td>
         <td>32</td>
      </tr>
      <tr>
         <td>ABNAMROLLC</td>
         <td>MLD   </td>
         <td>TPIN</td>
         <td>ACP</td>
         <td>10</td>
         <td>10</td>
      </tr>
      <tr>
         <td>AMHERSTP  </td>
         <td>QPE</td>
         <td>GRAM</td>
         <td>ACP</td>
         <td>341</td>
         <td>&nbsp;</td>
      </tr>
      <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>GRAM</td>
         <td>RJT</td>
         <td>56</td>
         <td>&nbsp;</td>
      </tr>
      <tr>
         <td>&nbsp;</td>
         <td>QPE   </td>
         <td>TPIN</td>
         <td>ACP</td>
         <td>24</td>
         <td>19</td>
      </tr>
      <tr>
         <td>&nbsp;</td>
         <td>QPP</td>
         <td>GRAM</td>
         <td>ACP</td>
         <td>353</td>
         <td>&nbsp;</td>
      </tr>
      <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>GRAM</td>
         <td>RJT</td>
         <td>2</td>
         <td>&nbsp;</td>
      </tr>
      <tr>
         <td>BAKERGRP  </td>
         <td>JBC</td>
         <td>GRAM</td>
         <td>ACP</td>
         <td>337</td>
         <td>142</td>
      </tr>
      <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>GRAM</td>
         <td>RJT</td>
         <td>3</td>
         <td></td>
      </tr>
   </tbody>
</table>

Fiddle

Answer 1

也许有点像下面这样。

columnsToProcess 对象应为要处理的列的从零开始列索引指定true。对于您所说的仅执行前两列的要求，我可以只使用 "td:lt(2)" 选择器，但使用对象来指定要处理的列更通用，例如，如果您稍后想要处理第一、第四和第六列:

columnsToProcess = { 0: true, 3: true, 5: true }

lastVals 对象跟踪每列的最后更改值。根本不需要初始化它的元素，因为当我们测试 lastVals[i] 时，如果尚未初始化，它只会返回 undefined，并且 undefined不等于任何字符串。

var columnsToProcess = {
  0: true,
  1: true
};
var lastVals = {};
$("table tbody tr").each(function() {     // for each row
  $(this).find("td").each(function(i) {   // for each cell in the current row
    if (!columnsToProcess[i]) return;     // do we care about this column?
    if (this.innerHTML === lastVals[i])   // if value is same as the previous row
      this.innerHTML = " ";          // blank out the cell
    else                                  // otherwise
      lastVals[i] = this.innerHTML;       // remember the current value
  });
});

table, th, td { border: 1px solid black; }
table { border-collapse: collapse; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <thead>
    <tr><th>ABBEY</th><th>ANX</th><th>TPIN</th><th>ACP</th><th>4</th><th>3</th></tr>
  </thead>
  <tbody>
    <tr><td>ABNAMRO</td><td>ANW</td><td>TPIN</td><td>ACP</td><td>32</td><td>32</td></tr>
    <tr><td>ABNAMROLLC</td><td>MLD</td><td>TPIN</td><td>ACP</td><td>10</td><td>10</td></tr>
    <tr><td>AMHERSTP</td><td>QPE</td><td>GRAM</td><td>ACP</td><td>341</td><td>&nbsp;</td></tr>
    <tr><td>AMHERSTP</td><td>QPE</td><td>GRAM</td><td>RJT</td><td>56</td><td>&nbsp;</td></tr>
    <tr><td>AMHERSTP</td><td>QPE</td><td>TPIN</td><td>ACP</td><td>24</td><td>19</td></tr>
    <tr><td>AMHERSTP</td><td>QPP</td><td>GRAM</td><td>ACP</td><td>353</td><td>&nbsp;</td></tr>
    <tr><td>AMHERSTP</td><td>QPP</td><td>GRAM</td><td>RJT</td><td>2</td><td>&nbsp;</td></tr>
    <tr><td>BAKERGRP</td><td>JBC</td><td>GRAM</td><td>ACP</td><td>337</td><td>142</td></tr>
    <tr><td>BAKERGRP</td><td>JBC</td><td>GRAM</td><td>RJT</td><td>3</td><td></td></tr>
  </tbody>
</table>

留给读者的练习:如果 "AMHERSTP" 和 "AMHERSTP " 被认为是相等的，则在比较值之前 trim 空格。