整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

html开发笔记20-合并单元格-列和行

、什么是合并单元格？

一个表格中分为 行 和 列 ，有时候你经常在网页中看到类似这样的表格，有时候是合并了列，有时候是合并了行。那么这个是怎么做的？也是通过下面的方法实现的。

二、怎么合并？

向单元格添加属性即可实现，合并 列 和 行的属性不一样

1、合并列的属性：clospan="2" //要合并几列数字就是几

2、合并行的属性：rowspan="2" //同理，要合并几行数字就是几

3、合并后的单元格（行或列）必然会自动多出来一个，需要手动删掉。

4、重点：合并单元格只和 td 标签有关系：

（1）合并列：是左右合并，在左侧的 td 标签中添加 colspan="2" 要合并的 td 的数量。

（2）合并行：是上下合并，在上面的 td 标签中添加 rowspan="2" 要合并的td的数量。

（3）合并完后删除多余的 td 标签。

三、两个属性的用法

1、合并 列 的用法：

（1）首先确定你要合并的单元格在第几行第几列，然后找到它，从他的td标签中添加属性。

例如要合并第4行的，第4和第5列：


<tr>
    <td>第三节</td>
    <td>html</td>
    <td>css</td>
    <td colspan="2">php</td> <!-- 合并 列 的用法-->
    <td>php</td>
  </tr>

2、合并 行 的用法：

例如下面：合并第3行和第4行的第1列。

完整代码：↓

.说明：

推荐指数：★★★★

通俗易懂。

2.效果图


3.一个含有内部的css的html，名叫：风车-1.html代码：

<!--注释法-->
<!--第1步：声明：可以大小写均可以：doctype=DOCTYPE-->
<!--doctype html-->
<!DOCTYPE html>

<!--第2步：html包起来，默认lang=‘en’，所以也可以删除-->
<!--像这样：html-->
<html>
<html lang="en"-->
    <!--第2-1步：head部分设置-->
    <head>
        <!--第2-1-1步：固定格式meta和title设置-->
        <meta charset="UTF-8">
        <!--网页名字自己随意取-->
        <title>大风车DIY1</title>
        <!--第2-1-2步：css的设置，因为简单所以直接写在html的单个文件里-->
        <!--也可以作为外部文件引起css文件-->
        <style>
            #box {
                width: 10px;
                height: 10px;
                margin: 5px auto;
                position: relative;
            }

            #main {
                width: 400px;
                height: 400px;
                animation: dfc 1s linear infinite;
            }

            /*这是css的注释方法*/
            /*风车的每一扇叶的设置,因为4个扇叶的设置是一样的，所以用这样*/
            /*4个扇叶的共性设置*/
            .css1,
            .css2,
            .css3,
            .css4 {
                width: 200px;
                height: 100px;
                border: 1px solid blue;
                border-radius: 100px 100px 0 0;
                position: absolute;
                /*4个扇叶的颜色渐变设置*/
                background-image: linear-gradient(green, yellow);
            }
            /*扇叶1的个性设置*/
            .css1 {
                top: 100px;
            }
            /*扇叶2的个性设置*/
            .css2 {
                top: 50px;
                left: 150px;
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                -o-transform: rotate(90deg);
                transform: rotate(90deg);
            }
            /*扇叶3的个性设置*/
            .css3 {
                top: 200px;
                left: 200px;
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
            }
            /*扇叶4的个性设置*/
            .css4 {
                top: 250px;
                left: 50px;
                -webkit-transform: rotate(270deg);
                -moz-transform: rotate(270deg);
                -ms-transform: rotate(270deg);
                -o-transform: rotate(270deg);
                transform: rotate(270deg);
            }

            /*中间的圆形的设置*/
            .ssss {
                width: 100px;
                height: 100px;
                border-radius: 100%;
                position: absolute;
                top: 150px;
                left: 150px;
                z-index: 10;
                /*请注意下面css的颜色设置，可以是小写的英文字母，也可以是大写的，还可以是十六进制*/
                /*中间圆的渐变颜色设置*/
                background-image: radial-gradient(pink, blue);
            }
            /*风车的竖直杆的设置*/
            .hhh {
                width: 2px;
                height: 250px;
                background-image: radial-gradient(black, RED);
                position: absolute;
                top: 200px;
                left: 199px;
                z-index: -1;
            }
            /*运动的功能定义*/
            @keyframes dfc {
                0% {
                    -webkit-transform: rotate(0deg);
                    -moz-transform: rotate(0deg);
                    -ms-transform: rotate(0deg);
                    -o-transform: rotate(0deg);
                    transform: rotate(0deg);
                }
                25% {
                    -webkit-transform: rotate( 90deg);
                    -moz-transform: rotate( 90deg);
                    -ms-transform: rotate( 90deg);
                    -o-transform: rotate( 90deg);
                    transform: rotate( 90deg);
                }
                50% {
                    -webkit-transform: rotate(180deg);
                    -moz-transform: rotate(180deg);
                    -ms-transform: rotate(180deg);
                    -o-transform: rotate(180deg);
                    transform: rotate(180deg);
                }
                75% {
                    -webkit-transform: rotate(270deg);
                    -moz-transform: rotate(270deg);
                    -ms-transform: rotate(270deg);
                    -o-transform: rotate(270deg);
                    transform: rotate(270deg);
                }
                100% {
                    -webkit-transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -o-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <!--第2-2步：body部分设置-->
    <body>
        <div id="box">
            <!--box的div容器里面有风车杆和main的4个运动的扇叶-->
            <div id="main">
                <!--main里的css是要一起运动的-->
                <div class="css1"></div>
                <div class="css2"></div>
                <div class="css3"></div>
                <div class="css4"></div>
                <div class="ssss"></div>
            </div>
            <!--风车的杆是不动的，所以单独放在一个div容器中-->
            <div class="hhh"></div>
        </div>

    </body>

</html>

4.如何将css拆开，单独呢？大型项目都是css单独一个文件夹，里面一大堆css文件。

4.1 建一个fengche.css文件，将下面代码复制进去，和风车-2.html放在同一个文件夹中。

fengche.css的代码：

#box {
width: 10px;
height: 10px;
margin: 5px auto;
position: relative;
}

#main {
width: 400px;
height: 400px;
animation: dfc 1s linear infinite;
}

/*这是css的注释方法*/
/*风车的每一扇叶的设置,因为4个扇叶的设置是一样的，所以用这样*/
/*4个扇叶的共性设置*/
.css1,
.css2,
.css3,
.css4 {
width: 200px;
height: 100px;
border: 1px solid blue;
border-radius: 100px 100px 0 0;
position: absolute;
/*4个扇叶的颜色渐变设置*/
background-image: linear-gradient(green, yellow);
}
/*扇叶1的个性设置*/
.css1 {
top: 100px;
}
/*扇叶2的个性设置*/
.css2 {
top: 50px;
left: 150px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
/*扇叶3的个性设置*/
.css3 {
top: 200px;
left: 200px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/*扇叶4的个性设置*/
.css4 {
top: 250px;
left: 50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}

/*中间的圆形的设置*/
.ssss {
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
top: 150px;
left: 150px;
z-index: 10;
/*请注意下面css的颜色设置，可以是小写的英文字母，也可以是大写的，还可以是十六进制*/
/*中间圆的渐变颜色设置*/
background-image: radial-gradient(pink, blue);
}
/*风车的竖直杆的设置*/
.hhh {
width: 2px;
height: 250px;
background-image: radial-gradient(black, RED);
position: absolute;
top: 200px;
left: 199px;
z-index: -1;
}
/*运动的功能定义*/
@keyframes dfc {
0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
25% {
    -webkit-transform: rotate( 90deg);
    -moz-transform: rotate( 90deg);
    -ms-transform: rotate( 90deg);
    -o-transform: rotate( 90deg);
    transform: rotate( 90deg);
}
50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
75% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
}

4.2 风车-2.html的代码：注意修改部分。


<!DOCTYPE html>
<html>
<html lang="en"-->
    <head>
        <meta charset="UTF-8">
        <title>大风车DIY2</title>
        <!--注意放在同一个文件夹下，本机是deepin的linux系统，win可能不同-->
        <link rel="stylesheet" href="./fengche.css" />
    </head>
    <body>
        <div id="box">
            <div id="main">
                <div class="css1"></div>
                <div class="css2"></div>
                <div class="css3"></div>
                <div class="css4"></div>
                <div class="ssss"></div>
            </div>
            <div class="hhh"></div>
        </div>

    </body>
</html>

怎么样？通俗易懂吧，看了后，立马入门。

考自下列文章

https://blog.csdn.net/u013558749/article/details/82257168 (element-ui 实现行合并)
https://www.cnblogs.com/guwufeiyang/p/12850088.html	(合并后样式的处理)

目标样式

合并后样式


来源数据

  • 获取到后台返回的数据再经过前端处理
  • 注意 [processId] [dimensionTag] 是参与合并的关键字段
[
    {
        "processId": "1499255834195238914",
        "currentProcessInfoId": "1499255834245570561",
        "flowType": "01",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "01",
        "dimensionName": "重点-测试",
        "dimensionTag": "1499255834195238914重点-测试",
        "nature": "01",
        "name": "1212",
        "statusRemark": "1212",
        "scoreStand": "1212",
        "source": "1212",
        "weight": 0.3,
        "status": "Y",
        "remark": "-",
        "index": 1,
        "rowIndex": 0
    },
    {
        "processId": "1499255834195238914",
        "currentProcessInfoId": "1499255834245570561",
        "flowType": "01",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "01",
        "dimensionName": "日常-测试",
        "dimensionTag": "1499255834195238914日常-测试",
        "nature": "01",
        "name": "TEST",
        "statusRemark": "100",
        "scoreStand": "100",
        "source": "100",
        "weight": 0.3,
        "status": "Y",
        "remark": "-",
        "index": 1,
        "rowIndex": 1
    },
    {
        "processId": "1499255834195238914",
        "currentProcessInfoId": "1499255834245570561",
        "flowType": "01",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "01",
        "dimensionName": "日常-测试",
        "dimensionTag": "1499255834195238914日常-测试",
        "nature": "01",
        "name": "12",
        "statusRemark": "12",
        "scoreStand": "12",
        "source": "12",
        "weight": 0.3,
        "status": "Y",
        "remark": "-",
        "index": 1,
        "rowIndex": 2
    },
    {
        "processId": "1499255834195238914",
        "currentProcessInfoId": "1499255834245570561",
        "flowType": "01",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "01",
        "dimensionName": "管理指标",
        "dimensionTag": "1499255834195238914管理指标",
        "nature": "02",
        "name": "12",
        "statusRemark": "12",
        "scoreStand": "12",
        "source": "12",
        "weight": 0.1,
        "status": "Y",
        "remark": "-",
        "index": 1,
        "rowIndex": 3
    },
    {
        "processId": "1499255834996350977",
        "currentProcessInfoId": null,
        "flowType": "02",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "00",
        "dimensionName": "重点-测试",
        "dimensionTag": "1499255834996350977重点-测试",
        "nature": "01",
        "name": "1212",
        "statusRemark": "1212",
        "scoreStand": "1212",
        "source": "1212",
        "weight": 0.3,
        "status": "-",
        "remark": "-",
        "index": 2,
        "rowIndex": 4
    },
    {
        "processId": "1499255834996350977",
        "currentProcessInfoId": null,
        "flowType": "02",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "00",
        "dimensionName": "日常-测试",
        "dimensionTag": "1499255834996350977日常-测试",
        "nature": "01",
        "name": "TEST",
        "statusRemark": "100",
        "scoreStand": "100",
        "source": "100",
        "weight": 0.3,
        "status": "-",
        "remark": "-",
        "index": 2,
        "rowIndex": 5
    },
    {
        "processId": "1499255834996350977",
        "currentProcessInfoId": null,
        "flowType": "02",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "00",
        "dimensionName": "日常-测试",
        "dimensionTag": "1499255834996350977日常-测试",
        "nature": "01",
        "name": "12",
        "statusRemark": "12",
        "scoreStand": "12",
        "source": "12",
        "weight": 0.3,
        "status": "-",
        "remark": "-",
        "index": 2,
        "rowIndex": 6
    },
    {
        "processId": "1499255834996350977",
        "currentProcessInfoId": null,
        "flowType": "02",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "00",
        "dimensionName": "管理指标",
        "dimensionTag": "1499255834996350977管理指标",
        "nature": "02",
        "name": "12",
        "statusRemark": "12",
        "scoreStand": "12",
        "source": "12",
        "weight": 0.1,
        "status": "-",
        "remark": "-",
        "index": 2,
        "rowIndex": 7
    }
]

将数据按照字段[processId] [dimensionTag]进行处理

// 按照dimensionTag合并行
getDimensionNumber() {
  this.dimensionIndexArr = []
  let DimensionObj = {}
  this.dataList.forEach((element, index) => {
    element.rowIndex = index
    if (DimensionObj[element.dimensionTag]) {
      DimensionObj[element.dimensionTag].push(index)
    } else {
      DimensionObj[element.dimensionTag] = []
      DimensionObj[element.dimensionTag].push(index)
    }
  })
  for (let k in DimensionObj) {
    if (DimensionObj[k].length > 1) {
      this.dimensionIndexArr.push(DimensionObj[k])
    }
  }
},
// 按照processId合并行
getRecordNumber() {
  this.recordIndexArr=[]
  let OrderObj = {}
  this.dataList.forEach((element, index) => {
    element.rowIndex = index
    if (OrderObj[element.processId]) {
      OrderObj[element.processId].push(index)
    } else {
      OrderObj[element.processId] = []
      OrderObj[element.processId].push(index)
    }
  })
  for (let k in OrderObj) {
    if (OrderObj[k].length > 1) {
      this.recordIndexArr.push(OrderObj[k])
    }
  }
},

根据页面展示需要,控制哪一些列上的数据需要进行合并

objectSpanMethod({row, column, rowIndex, columnIndex}) {
  if (columnIndex === 0 || columnIndex === 1 || columnIndex >= 9) {
    for (let i = 0; i < this.recordIndexArr.length; i++) {
      let element = this.recordIndexArr[i]
      for (let j = 0; j < element.length; j++) {
        let item = element[j]
        if (rowIndex == item) {
          if (j == 0) {
            return {
              rowspan: element.length,
              colspan: 1
            }
          } else if (j != 0) {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
    }
  }
  if (columnIndex === 2) {
    for (let i = 0; i < this.dimensionIndexArr.length; i++) {
      let element = this.dimensionIndexArr[i]
      for (let j = 0; j < element.length; j++) {
        let item = element[j]
        if (rowIndex == item) {
          if (j == 0) {
            return {
              rowspan: element.length,
              colspan: 1
            }
          } else if (j != 0) {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
    }
  }
},

处理样式

  • 完成合并后会改变框架的样式,需要修复


样式错乱

  • 在el-table上添加 [row-class-name] [@cell-mouse-enter] [@cell-mouse-leave]并实现对应方法
<el-table
  ref="table"
  v-loading="dataListLoading"
  :data="dataList"
  border
  :span-method="objectSpanMethod"
  :row-class-name="tableRowClassName"
  @cell-mouse-enter="cellMouseEnter"
  @cell-mouse-leave="cellMouseLeave"
  style="width: 100%;margin-top: 16px"
>
    .......
</el-table>
tableRowClassName({row, rowIndex}) {
  let arr = this.hoverOrderArr
  for (let i = 0; i < arr.length; i++) {
    if (rowIndex === arr[i]) {
      return 'success-row'
    }
  }
},
cellMouseEnter(row, column, cell, event) {
  this.rowIndex = row.rowIndex
  this.hoverOrderArr = []
  this.recordIndexArr.forEach((element) => {
    if (element.indexOf(this.rowIndex) >= 0) {
      this.hoverOrderArr = element
    }
  })
},
cellMouseLeave(row, column, cell, event) {
  this.rowIndex = '-1'
  this.hoverOrderArr = []
},
<style scoped>
/deep/ .el-table .success-row {
  background: #ecf4fe;
}
</style>

完整代码


在线咨询
上一篇：割绳子实验室动画剧集APP - Om Nom Toons
下一篇：link vs @import：CSS 引入方式大PK，谁才是你的最佳选择？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 濮阳县 潜江市 犍为县 南市区 洛龙区 裕民县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服