jquery - 更改具有相同内容的单元格的 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。

Answer 2

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

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