更改具有相同内容的单元格的 colspan，使它们看起来合并

Question

我有一个表格，单元格中有冗余数据。[左表]

我需要将它们加入一个单元格中。[右表]

表的结构：

<table>
  <tr>
    <td class="bold">Value1:</td>
    <td class="green">A</td>
    <td class="green">A</td>
    <td class="green">A</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td class="green">B</td>
    <td class="green">B</td>
  </tr>
  <tr>
    <td class="bold">Value2:</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td class="green">C</td>
    <td class="green">C</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td class="green">D</td>
    <td>&nbsp;</td>
  </tr>
</table>

我能够隐藏冗余单元格，但我需要以某种方式设置 colspan。

$(document).ready(function () {

var all = $('.green');
var seen = {};
all.each(function () {
    var txt = $(this).text();
    if (seen[txt]) {
        $(this).hide();
    }
    else {
        seen[txt] = true;
    }
});


});

Answer 1

$(document).ready(function() {

  var all = $('.green');
  var first;
  var prev = undefined;
  var colspan = 1;

  var setColspan = function() {
    first.attr('colspan', colspan);
    colspan = 1;
  }

  all.each(function() {
    var txt = $(this).text();
    if (prev === txt) {
      colspan += 1;
      $(this).remove();
    } else {
      // doesnt match, set colspan on first and reset colspan counter
      if (colspan > 1) {
        setColspan();
      }
      first = $(this);
      prev = txt;
    }
  });

  if (colspan > 1) {
    setColspan();
  }

});

td {
  border: 1px solid;
  text-align: center;
  min-width: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table>
  <tr>
    <td class="bold">Value1:</td>
    <td class="green">A</td>
    <td class="green">A</td>
    <td class="green">A</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td class="green">B</td>
    <td class="green">B</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
  </tr>
  <tr>
    <td class="bold">Value2:</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td class="green">C</td>
    <td class="green">C</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td class="green">D</td>
    <td>&nbsp;</td>
  </tr>
</table>

认为它做了你想要的事情，检查匹配列值的连续块，如果找到匹配项，则将其删除，当它没有找到匹配项并且 colspan 足够大时，它将 colspan 设置为列表中的第一个，然后重置。如果您有连续的值跨越一行的末尾并进入下一行的开头，则它不起作用。如果是这样的话，会想要逐行进行

如果最后一组列也是连续的，则使用边缘情况更新上面的内容。在这种情况下它不会设置 colspan 。