• 技术文章 > web前端 > js教程

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

    不言 不言 2019-02-13 10:11:31 转载 139

    本篇文章给大家带来的内容是关于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 + '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中调用公共方法

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

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

    3215810423-5c6272c644799_articlex.png

    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语法,请根据自已使用的js框架自行调整。

    6.结果

    2552960467-5c6277ad97636_articlex.png

    以上就是javascript动态合并纵向单元格的方法介绍(代码)的详细内容,更多请关注php中文网其它相关文章!

    第六期线上培训班
    专题推荐: 前端 javascript html table
    上一篇:ES6、ES7和ES8常用的特性总结(代码示例) 下一篇:Javascript中的valueOf与toString的对比介绍(代码示例)

    相关文章推荐

    • JavaScript动态创建div属性和样式示例代码_javascript技巧 • 如何用JavaScript动态呼叫函数(两种方式)_javascript技巧 • 使用JavaScript动态设置样式实现代码(2)_javascript技巧 • javascript动态加载三_javascript技巧 • javascript动态加载实现方法一_javascript技巧

    全部评论我要评论

  • 取消 发布评论 发送
  • PHP中文网