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

问题描述

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

I have got a table with redundant data in cells. [Left table]

我需要将它们合并到一个单元格中.[右表]

I need to join them into one cell. [Right table]

表格结构:

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

I am able to hide redundant cell, but I need to set colspan somehow.

$(document).ready(function () {

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


});

推荐答案

$(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 设置在列表中的第一个然后重置.如果您的连续值跨越一行的末尾并进入下一行的开头，则它不起作用.如果是这种情况，我会希望逐行进行

Think it does what you want, checks for consecutive blocks of matching column values, if it finds a match, it removes it, when it doesnt find a match and colspan is large enough it sets the colspan on the first in the list and then resets. it doesnt work if you have consecutive values that span end of one row and into the beginning of the next. would want to do it row by row if that is the case

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

updated above with edge case if last set of columns are consecutive as well. it wouldnt set the colspan in that case then.

这篇关于更改具有相同内容的单元格的 colspan，使它们看起来合并的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！