有哪些實現(xiàn)javascript動態(tài)合并縱向單元格的方法

有哪些實現(xiàn)javascript動態(tài)合并縱向單元格的方法？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

1、需求

合并相鄰行內(nèi)容相同的單元格。

2.概念

rowspan指定單元格縱向跨越的行數(shù)。如rowspan被設(shè)為3，這表示該單元格必須跨越三行（本身一行，加上另外兩行）

3.公共方法

  /**
   * 單元格合并方法,增加rowspan屬性
   * @param data 要處理的數(shù)據(jù)
   * @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 + '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;
  }

4.js中調(diào)用公共方法

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']);

調(diào)用方法后的數(shù)據(jù)處理結(jié)果

5.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>

注意：此html代碼使用的是ng語法，請根據(jù)自已使用的js框架自行調(diào)整。

6.結(jié)果

看完上述內(nèi)容，你們掌握有哪些實現(xiàn)javascript動態(tài)合并縱向單元格的方法的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！