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

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

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

如果最后一组列也是连续的，则使用边缘情况更新上面的

。在那种情况下，它不会设置colspan。

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

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

动态计算并设置colspan值

3 个答案: