javascript动态合并纵向单元格的方法介绍（代码）

本篇文章给大家带来的内容是关于javascript动态合并纵向单元格的方法介绍（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1、需求

合并相邻行内容相同的单元格。

2.概念

rowspan指定单元格纵向跨越的行数。如rowspan被设为3，这表示该单元格必须跨越三行（本身一行，加上另外两行）

3.公共方法

  /**
   * 单元格合并方法,增加rowspan属性
   * @param data 要处理的数据
   * @param nameList 合并的字段list
   */
function rowspanFun(data, nameList) {
    for (var i = 0; i < nameList.length; i++) {
      var name = nameList[i];
      var startRow = 0;
      var endRow = data.length;
      var mergeNum = 1;
      if (endRow != 1) {
        for (var j = startRow; j < endRow; j++) {
          if (j == endRow - 1) { //判断是否是最后一个元素
            if (startRow == endRow - 1) {
              data[j][name + &#39;Rowspan&#39;] = 1;
            }
          } else {
            if (data[startRow][name] == data[j + 1][name]) {
              data[j + 1][name + &#39;Rowspan&#39;] = 0;
              mergeNum = mergeNum + 1;
              data[startRow][name + &#39;Rowspan&#39;] =mergeNum;
            } else {
              startRow = j + 1;
              if (mergeNum > 1) {
                data[startRow][name + 'Rowspan'] = 1;
              } else {
                data[j][name + 'Rowspan'] = 1;
              }
              mergeNum = 1;
            }
          }
        }
      } else {
        data[0][name + 'Rowspan'] = 1;
      }
    }
    return data;
  }

4.js中调用公共方法

var data =  [
      {name: 'dwj', sex: '女', age: 20},
      {name: 'dwj', sex: '男', age: 20},
      {name: 'dwq', sex: '女', age: 20},
      {name: 'other', sex: '女', age: 20}
    ];
rowspanFun(data, ['name', 'sex']);

调用方法后的数据处理结果

5.html中使用

<table>
    <tr *ngFor="let item of data">
      <td *ngIf="item.nameRowspan != 0" [attr.rowspan]=&#39;item.nameRowspan&#39;>{{item.name}}</td>
      <td *ngIf="item.sexRowspan != 0" [attr.rowspan]=&#39;item.sexRowspan&#39;>{{item.sex}}</td>
      <td>{{item.age}}</td>
    </tr>
  </table>

注意：此html代码使用的是ng语法，请根据自已使用的js框架自行调整。

6.结果

以上是javascript动态合并纵向单元格的方法介绍（代码）的详细内容。更多信息请关注PHP中文网其他相关文章！