更改具有相同内容的单元格的 colspan，因此它们似乎已合并答案

【问题标题】：Change colspan of cells with identical content, so they appear to be merged更改具有相同内容的单元格的 colspan，因此它们似乎已合并
【发布时间】：2021-01-06 13:55:41
【问题描述】：

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

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

表结构：

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


});

【问题讨论】：

你知道当这 4 个值不是唯一的时候你的表会崩溃和烧毁吧？

标签： jquery html-table

【解决方案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。

【讨论】：

text in last td of any row is same as text in first td of next row 时你的逻辑将不起作用。

【解决方案2】：

Answer from @Kevin Nacios 几乎是完美的，但是当text in last td of any row is same as text in first td of next row 时就不行了。

尝试如下。解释在评论中。

$(document).ready(function() {

  // loop over each tr
  $('tr').each((index, tr) => {

    // get first td
    let td = $(tr).find('td').eq(0);
    // set colspan value
    let colspan = 1;

    // if td exist then proceed
    while (td.length) {
      // find next td
      let next = td.next();

      // if current td and next td has same text then remove next td
      if (td.text().trim().length > 0 && td.text().trim() == next.text().trim()) {
        // remove next td
        next.remove();
        // increase colspan
        colspan++;
        // set colspan
        td.attr('colspan', colspan);
      } else {
        // reset colspan
        colspan = 1;
        // set next as current td
        td = next;
      }
    }
  });

});

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>&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">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">B</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>

【讨论】：

【解决方案3】：

您可以设置 colspan，

var cell=$([selector]);
cell.attr('colspan',N);

然后删除以下同级

var sib=cell.next();
for(var i=0;i<N;i++)
{
  if(sib.length==0)break; 
  var toBeRemoved=sib;
  sib=sib.next(); 
  toBeRemoved.remove();
}

【讨论】：