1. demand

Merge cells with the same contents in adjacent rows.

2. concept

Rowspan specifies the number of rows the cell spans vertically. If rowspan is set to 3, this means that the cell must span three rows (one row for itself, plus the other two rows)

3. Public methods

  /**
   * Cell merging method, add rowspan property
   * @param data Data to process
   * @param nameList Merged field 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) { //Determine if it is the last element
            if (startRow == endRow - 1) {
              data[j][name + 'Rowspan'] = 1;
            }
          } else {
            if (data[startRow][name] == data[j + 1][name]) {
              data[j + 1][name + 'Rowspan'] = 0;
              mergeNum = mergeNum + 1;
              data[startRow][name + 'Rowspan'] =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;
  }

Calling common methods in 4.js

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

Data processing result after calling method

5. Use in HTML

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

Note: This html code uses ng syntax, please adjust according to the js framework you use.

6. results