JavaScript 动态创建表格行跨度？答案

【问题标题】：JavaScript to create table row spans on the fly?JavaScript 动态创建表格行跨度？
【发布时间】：2021-07-23 05:14:37
【问题描述】：

希望对原始表格进行表格化，并找到所有相同的相邻行单元格并使用 Javescript 为其创建行跨度。

在此 SO 中找到此代码。 How to modify attribute ROWSPAN with jQuery?

    function modifyTableRowspan(column) {
    
        var prevText = "";
        var counter = 0;
    
        column.each(function (index) {
    
    
            var textValue = $(this).text();
    
            if (index === 0) {
                prevText = textValue;
            }
    
            if (textValue !== prevText || index === column.length - 1) {
    
                var first = index - counter;
    
                if (index === column.length - 1) {
                   counter = counter + 1;
                }
    
                column.eq(first).attr('rowspan', counter);
    
    
                if (index === column.length - 1)
                {
                    for (var j = index; j > first; j--) {
                        column.eq(j).remove();
                    }
                } else {
    
                    for (var i = index - 1; i > first; i--) {
                        column.eq(i).remove();
                    }
                }
    
                prevText = textValue;
                counter = 0;
            }
    
            counter++;
    
        });
    
    }

起初似乎做得很好。但是，在测试过程中我发现最后一行似乎无法正常工作。 看到这个https://jsfiddle.net/eupb0fmx/3/

无法弄清楚发生了什么。提前致谢。戴夫

【问题讨论】：

你的 jsfiddle 得到 404...
@biberman 删除末尾的;。
@BenStephens 知道了 - 谢谢...
感谢所有答案将在上午消化，修复代码并关闭此代码。
作为 SO 上的偶尔海报。我应该将它链接到我从中获得代码的原始帖子吗？？

标签： javascript html-table

【解决方案1】：

我认为问题在于以下代码和具有匹配条件的 for 循环，因为它没有考虑到您只想在 textValue === prevText 时执行此操作

if (index === column.length - 1) {
    counter = counter + 1;
}

var column1_2 = $('.modified_table1 td:nth-child(2)');
var column2_2 = $('.modified_table2 td:nth-child(2)');


modifyTableRowspan(column1_2);
modifyTableRowspan(column2_2);



//the function
function modifyTableRowspan(column) {

  var prevText = "";
  var counter = 0;

  column.each(function (index) {
    
    var textValue = $(this).text();

    if (index === 0) {
      prevText = textValue;
    }

    if (textValue !== prevText || index === column.length - 1) {

      var first = index - counter;
      var offset = (index === column.length - 1 && textValue === prevText) ? 1 : 0;

      counter = counter + offset;

      column.eq(first).attr('rowspan', counter);

      for (var i = index - 1 + offset; i > first; i--) {
        column.eq(i).remove();
      }

      prevText = textValue;
      counter = 0;
    }

    counter++;

  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="unmodified_table" border="1">       
    <tr><td>1</td><td>22</td></tr>
    <tr><td>2</td><td >22</td></tr>
    <tr><td>3</td><td >88</td></tr>
    <tr><td>4</td><td>22</td></tr>
    <tr><td>5</td><td >22</td></tr>
    <tr><td>5</td><td >22</td></tr>
    <tr><td>6</td><td>3</td></tr>
    <tr><td>7</td><td >44</td></tr>
    <tr><td>8</td><td >55</td></tr>
</table>
<br />

<table class="modified_table1" border="1">  
    <tr><td>1</td><td>22</td></tr>
    <tr><td>2</td><td >22</td></tr>
    <tr><td>3</td><td >88</td></tr>
    <tr><td>4</td><td>22</td></tr>
    <tr><td>5</td><td >22</td></tr>
    <tr><td>5</td><td >22</td></tr>
    <tr><td>6</td><td>3</td></tr>
    <tr><td>7</td><td >44</td></tr>
    <tr><td>8</td><td >55</td></tr>
</table>
<br />
<table class="modified_table2" border="1">  
    <tr><td>1</td><td>22</td></tr>
    <tr><td>2</td><td >22</td></tr>
    <tr><td>3</td><td >88</td></tr>
    <tr><td>4</td><td>22</td></tr>
    <tr><td>5</td><td >22</td></tr>
    <tr><td>5</td><td >22</td></tr>
</table>

更清洁的（在我看来）解决方案可能类似于：

var column1_2 = $('.modified_table1 td:nth-child(2)');
var column2_2 = $('.modified_table2 td:nth-child(2)');

modifyTableRowspan(column1_2);
modifyTableRowspan(column2_2);

function apply_rowspan_for(column, start_index, end_index) {
  column.eq(start_index).attr('rowspan', end_index - start_index + 1);

  for(let i = start_index; i < end_index; i++) {
    column.eq(i + 1).remove();
  }
}

function modifyTableRowspan(column) {
  const change_indexes = $.makeArray(column)
    .map((cell) => $(cell).text())
    .reduce((acc, v, i, all) => all[i + 1] !== v ? acc.concat(i) : acc, []);

  change_indexes.forEach((change_index, i, { [i - 1]: last }) => {
    if(change_index - (last ?? -1) > 1)
      apply_rowspan_for(column, (last ?? -1) + 1, change_index);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="unmodified_table" border="1">       
    <tr><td>1</td><td>22</td></tr>
    <tr><td>2</td><td >22</td></tr>
    <tr><td>3</td><td >88</td></tr>
    <tr><td>4</td><td>22</td></tr>
    <tr><td>5</td><td >22</td></tr>
    <tr><td>5</td><td >22</td></tr>
    <tr><td>6</td><td>3</td></tr>
    <tr><td>7</td><td >44</td></tr>
    <tr><td>8</td><td >55</td></tr>
</table>
<br />

<table class="modified_table1" border="1">  
    <tr><td>1</td><td>22</td></tr>
    <tr><td>2</td><td >22</td></tr>
    <tr><td>3</td><td >88</td></tr>
    <tr><td>4</td><td>22</td></tr>
    <tr><td>5</td><td >22</td></tr>
    <tr><td>5</td><td >22</td></tr>
    <tr><td>6</td><td>3</td></tr>
    <tr><td>7</td><td >44</td></tr>
    <tr><td>8</td><td >55</td></tr>
</table>
<br />
<table class="modified_table2" border="1">  
    <tr><td>1</td><td>22</td></tr>
    <tr><td>2</td><td >22</td></tr>
    <tr><td>3</td><td >88</td></tr>
    <tr><td>4</td><td>22</td></tr>
    <tr><td>5</td><td >22</td></tr>
    <tr><td>5</td><td >22</td></tr>
</table>

【讨论】：

既然这是最好的答案！
谢谢你，喜欢这段代码，甚至了解了新的空值合并运算符。