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

时间:2016-08-24 06:32:42

标签: javascript jquery html

我有一个与此类似的html表

enter image description here

我想替换第一个TWO 列中的所有重复值,以替换为null ,即类似于此

的输出

enter image description here

在下面添加了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

1 个答案:

答案 0 :(得分: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 = "&nbsp;";          // 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 "被认为是相等的。