js 表格合并单元格

 

5列  根据需要可添加 或 删除 strOneTemp  strTwoTemp  strThreeTemp  strFourTemp  strFiveTemp 

//合并单元格 
this.mergeCellsTable = function(){
var strOneTemp = null;
var indexOne = 1
var objOne={};

var strTwoTemp = null;
var indexTwo = 1
var objTwo={};

var strThreeTemp = null;
var indexThree = 1
var objThree={};

var strFourTemp = null;
var indexFour = 1
var objFour={};

var strFiveTemp = null;
var indexFive = 1
var objFive={};

var _$tr = $('#table>tbody>tr');  //对应table的ID
for(var i=0;i<_$tr.length;i++){
if(i<_$tr.length-1){    //不包括最后一行
var flagOne = false;
var flagTwo = false;
var flagThree = false;
var flagFour = false;
var flagFive = false;

var oneStr = $(_$tr[i]).find("td").eq(0).text();
if(oneStr==strOneTemp){
$(objOne).attr("rowspan",indexOne+1);
flagOne = true;
indexOne++;
}else{
objOne = $(_$tr[i]).find("td").eq(0);
strOneTemp = oneStr;
indexOne = 1;
}

var twoStr = $(_$tr[i]).find("td").eq(1).text();
if(twoStr==strTwoTemp){
$(objTwo).attr("rowspan",indexTwo+1);
flagTwo = true;
indexTwo++;
}else{
objTwo = $(_$tr[i]).find("td").eq(1);
strTwoTemp = twoStr;
indexTwo = 1;
}

var threeStr = $(_$tr[i]).find("td").eq(2).text();
if(threeStr==strThreeTemp){
$(objThree).attr("rowspan",indexThree+1);
flagThree = true;
indexThree++;
}else{
objThree = $(_$tr[i]).find("td").eq(2);
strThreeTemp = threeStr;
indexThree = 1;
}

var fourStr = $(_$tr[i]).find("td").eq(3).text();
if(fourStr==strFourTemp){
$(objFour).attr("rowspan",indexFour+1);
flagFour = true;
indexFour++;
}else{
objFour = $(_$tr[i]).find("td").eq(3);
strFourTemp = fourStr;
indexFour = 1;
}

var fiveStr = $(_$tr[i]).find("td").eq(4).text();
if(fiveStr==strFiveTemp){
$(objFive).attr("rowspan",indexFive+1);
flagFive = true;
indexFive++;
}else{
objFive = $(_$tr[i]).find("td").eq(4);
strFiveTemp = fiveStr;
indexFive = 1;
}

if(flagOne){
$(_$tr[i]).find("td").eq(0).hide();
}

if(flagTwo){
$(_$tr[i]).find("td").eq(1).hide();
}

if(flagThree){
$(_$tr[i]).find("td").eq(2).hide();
}

if(flagFour){
$(_$tr[i]).find("td").eq(3).hide();
}

if(flagFive){
$(_$tr[i]).find("td").eq(4).hide();
}
}
}
}

转载于:https://www.cnblogs.com/ljc1212/p/9150635.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp 中可以使用 `uni-list` 组件实现表格的展示,但是目前 `uni-list` 组件并不支持合并单元。你可以考虑使用自定义组件或者第三方插件来实现表格合并单元功能。 其中,自定义组件需要手动实现合并单元的算法和样式,比较麻烦;而第三方插件则可以直接使用已经封装好的组件,如 `uni-simple-table` 组件,该组件可以实现表格合并单元功能。 使用 `uni-simple-table` 组件的步骤如下: 1. 安装 `uni-simple-table` 组件 ``` npm install @dcloudio/uni-ui --save ``` 2. 在页面中引入组件 ```html <template> <view> <uni-simple-table :columns="columns" :data="data"></uni-simple-table> </view> </template> <script> import uniSimpleTable from '@dcloudio/uni-ui/lib/uni-simple-table/uni-simple-table.vue' export default { components: { uniSimpleTable }, data() { return { columns: [ { title: '姓名', key: 'name' }, { title: '性别', key: 'gender' }, { title: '年龄', key: 'age' }, ], data: [ { name: '张三', gender: '男', age: 22 }, { name: '李四', gender: '女', age: 21 }, { name: '王五', gender: '男', age: 23 }, ] } } } </script> ``` 3. 在 `columns` 中设置需要合并单元的 `rowspan` 和 `colspan` 属性,示例代码如下: ```js columns: [ { title: '姓名', key: 'name', rowspan: 2 }, { title: '性别', key: 'gender', rowspan: 2 }, { title: '年龄', key: 'age', colspan: 2 }, { title: '工作', key: 'job', colspan: 2 }, ], ``` 在上述示例代码中,设置了姓名和性别单元需要合并两行,年龄和工作单元需要合并两列。 需要注意的是,`uni-simple-table` 组件中的 `columns` 和 `data` 属性的使用方法与 `uni-list` 组件略有不同,具体使用方法可以参考官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值