精华内容
下载资源
问答
  • table合并单元格

    千次阅读 2016-02-25 00:49:02
    table合并单元格新建一张表格,要求表格有四行四列,其中第一行的四列合并,第二行、第三行和第四行的第一列合并 table合并单元格

    table合并单元格


    新建一张表格,要求表格有四行四列,其中第一行的四列合并,第二行、第三行和第四行的第一列合并

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>table合并单元格</title>
    </head>
    
    <body>
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="4"> </td>
      </tr>
      <tr>
        <td rowspan="3"> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
    </table>
    </body>
    </html>
    


    展开全文
  • table 合并单元格

    2019-01-26 08:41:24
    //合并单元格函数(tableId 表格id,cellIndex 合并td的索引 从0开始),,如果多列的话,,列数最大的放在上面 function mergeCells(tableId,cellIndex){  var $tr = $("#"+tableId+" tbody tr"...


    //合并单元格函数(tableId 表格id,cellIndex  合并td的索引 从0开始),,如果多列的话,,列数最大的放在上面
    function mergeCells(tableId,cellIndex){
        var $tr = $("#"+tableId+" tbody tr");
        var companyList = new Array();

        //当前列的所有内容
        $.each($tr, function (index, ele) {
            var text = $(ele).find("td").eq(cellIndex).text();
            companyList.push(text);
        });

        //按照内容分组统计
        var hist = {};
        companyList.map(function (a) {
            if (a in hist)
                hist[a]++;
            else
                hist[a] = 1;
        });

        //记录操作表格信息(起始TR索引,结束TR索引,合并行数,内容名称)
        var list = new Array();
        var temp = "";
        $.each(companyList, function (index, ele) {
            var obj = new Object();
            if (temp != ele) {
                temp = ele;
                obj.FirstIndex = index;
                obj.RowSpan = hist[ele];
                obj.EndIndex = index + obj.RowSpan - 1;
                obj.Name = ele;
                list.push(obj);
            }
        });

        //合并表格
        $.each(list, function (index, ele) {
            //设置rowspan
            $("#"+tableId+" tbody tr:eq(" + ele.FirstIndex + ") td:eq("+cellIndex+")").attr("rowspan", ele.RowSpan);
            //清除多余行数
            var $removeTr = $("#"+tableId+" tbody tr:gt(" + ele.FirstIndex + "):lt(" + ele.EndIndex + ")");
            $.each($removeTr, function (removeIndex, removeEle) {
                if ($(removeEle).children("td:eq(" + cellIndex + ")").text() == ele.Name) {
                    $(removeEle).children("td:eq(" + cellIndex + ")").remove();
                }
            });
        });
    }

    展开全文
  • element ui table合并单元格或者测试 vue 文件<template> <div> <el-table :data="tableData" tooltip-effect="dark" style="width: 100%" :span-method="arraySpanMethod" ...

    2c405861857e863e3c3011110e6415c1.png

    element ui table 的合并单元格

    7fcae27816f899ff195f8310267a6446.png

    或者

    6efdbc0d7073a58abbbbb97f0f4ef02e.png

    测试 vue 文件

    <template>
      <div>
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :span-method="arraySpanMethod"
          border
        >
          <el-table-column
            prop="name"
            label="姓名"
          >
          </el-table-column>
          <el-table-column label="日期">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="phone"
            label="电话"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop=""
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    
    </template>
    
    <script>
    import axios from 'axios'
    export default {
      data() {
        return {
          tableData: [{
            name: '王小虎 ',
            date: '2016-05-02',
            address: '上海市普陀区金沙江路 1511 弄',
            phone: '123456',
          }, {
            name: '王小虎 ',
            date: '2016-05-02',
            address: '上海市普陀区金沙江路 1512 弄',
            phone: '123456'
          }, {
            name: '东北虎 ',
            date: '2016-05-02',
            address: '上海市普陀区金沙江路 1513 弄',
            phone: '123456'
          }, {
            name: '东北虎 ',
            date: '2016-05-01',
            address: '上海市普陀区金沙江路 1514 弄',
            phone: '1234567'
          }, {
            name: '东北虎 ',
            date: '2016-05-07',
            address: '上海市普陀区金沙江路 1515 弄',
            phone: '1234567'
          }, {
            name: '东北虎 ',
            date: '2016-05-07',
            address: '上海市普陀区金沙江路 1516 弄',
            phone: '12345673'
          }, {
            name: '赔钱虎 ',
            date: '2016-05-07',
            address: '上海市普陀区金沙江路 1517 弄',
            phone: '12345673'
          }],
          // 这里是合并需要用到的数据
          testArr1: [],
          testArr2: [],
          testArr3: [],
          testPosition1: 0,
          testPosition2: 0,
          testPosition3: 0,
        }
      },
      created() {
        this.toQuery() // 模拟 请求 tableData 数据
      },
      methods: {
        toQuery() {
          // this.tableData = axios 数据
          this.rowspan(this.testArr1, this.testPosition1, "name");
          this.rowspan(this.testArr2, this.testPosition2, "phone");
          this.rowspan(this.testArr3, this.testPosition3, "date");
        },
        // 合并行或者是列
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 0) {
            const _row = this.testArr1[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
              rowspan: _row,
              colspan: _col,
            };
          }
          if (columnIndex === 3) {
            const _row = this.testArr2[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
              rowspan: _row,
              colspan: _col,
            };
          }
          if (columnIndex === 1) {
            const _row = this.testArr3[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
              rowspan: _row,
              colspan: _col,
            };
          }
        },
        // 整理数据
        rowspan(spanArr, position, spanName) {
          this.tableData.forEach((item, index) => {
            if (index === 0) {
              spanArr.push(1);
              position = 0;
            } else {
              if (
                this.tableData[index][spanName] ===
                this.tableData[index - 1][spanName]
                && // 这里为 图片 和 图二 数据异同点 这里用 name 判断是否同类 (注释则为图二)
                this.tableData[index].name ===
                this.tableData[index - 1].name
              ) {
                spanArr[position] += 1;
                spanArr.push(0);
              } else {
                spanArr.push(1);
                position = index;
              }
            }
          });
        },
      }
    }
    </script>

    有需求的可以直接使用哦

    展开全文
  • layui table合并单元格.zip 跨行自动合并单元格
  • vue-easytable合并单元格

    2018-05-18 17:55:36
    vue-easytable合并单元格,文档包括ftl文件及对应的js
  • 主要介绍了table合并单元格与img图片铺满整个td的html,需要的朋友可以参考下
  • table合并单元格(Jquery 插件)-附件资源
  • 杂技随笔:BootstrapTable 合并单元格 前言 今天博主将为大家分享:杂技随笔:BootstrapTable 合并单元格,不喜勿喷,如有异议欢迎讨论! 开始 在最近写代码时遇到了一个BootStarpTbale的合并单元格问题因此...

    杂技随笔:BootstrapTable 合并单元格


    前言

    今天博主将为大家分享:杂技随笔:BootstrapTable 合并单元格,不喜勿喷,如有异议欢迎讨论!


    开始

    在最近写代码时遇到了一个BootStarpTbale的合并单元格问题因此记录下来以便以后回看

    JavaScript代码
    /**
     * 合并单元格
     * @param data  原始数据(在服务端完成排序)
     * @param fieldName 合并属性名称
     * @param colspan   合并列
     * @param target    目标表格对象
     */
    function mergeCells(data,fieldName,colspan,target){
        //声明一个map计算相同属性值在data对象出现的次数和
        var sortMap = {};
        for(var i = 0 ; i < data.length ; i++){
            for(var prop in data[i]){
                if(prop == fieldName){ // 防止出现乱合并
                    var key = data[i][prop]
                    if(sortMap.hasOwnProperty(key)){
                        sortMap[key] = sortMap[key] * 1 + 1;
                    } else {
                        sortMap[key] = 1;
                    }
                    break;
                } 
            }
        }
        for(var prop in sortMap){
            console.log(prop,sortMap[prop])// 打印合并参数
        }
        var index = 0;
        for(var prop in sortMap){
            var count = sortMap[prop] * 1;
            $(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: colspan, rowspan: count});   // 进行合并单元格
            index += count;
        }
    }
    

    在bootstrapTable加载成功执行

    onLoadSuccess : function(data) {                                
                    var data = $('#table').bootstrapTable('getData', true);
                    //合并单元格
                    mergeCells(data, "companyTypeName", 1, $('#table'));
    }
    

    在这里说一下分页也是可以显示的


    记录第二种

    /**
     * 合并单元格
     * @param data  原始数据(在服务端完成排序)
     * @param fieldName 合并属性名称
     * @param fieldName2 指定行方向可能的合并字段名称
     * @param target    目标表格对象
     * 以下方法可实现动态行与列的同时合并
     */
    function mergeCells(data,fieldName,fieldName2,target){
        //声明一个map计算相同属性值在data对象   列方向上出现的次数和
        var rowsSortMap = {};    
        for(var i = 0 ; i < data.length ; i++){
            for(var prop in data[i]){
                if(prop == fieldName){
                    var key = data[i][prop]
                    if(rowsSortMap.hasOwnProperty(key)){
                        rowsSortMap[key] = rowsSortMap[key] * 1 + 1;
                    } else {
                        rowsSortMap[key] = 1;
                    }
                    break;
                } 
            }
        }
      //声明一个map计算相同属性值在data对象  行方向上出现的次数和,行方向上我这里指定了另外一列 也可以向不指定从而全部进行查看
        var colsSortMap = {};
        for(var i = 0 ; i < data.length ; i++){
            for(var prop in data[i]){
                if(prop == fieldName){            	
                	for(var pp in data[i] ){
                		if(pp == fieldName2){            			
                			var key1 = data[i][prop];
                			var key2 = data[i][pp];
                			if(key1 == key2){
                				colsSortMap[key1] = 2;
                			}else{
                				colsSortMap[key1] = 1;
                			}
                			break;
                		}            		
                	}                               
                } 
            }
        };
        
        for(var prop in rowsSortMap){
            console.log(prop,rowsSortMap[prop])
        }
        for(var prop in colsSortMap){
            console.log(prop,colsSortMap[prop])
        }
          $(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: count, rowspan: 1});   
     
        //寻找对应字段具体值相对应的 rowsSortMap  colsSortMap 值,以防止出现乱合并的现象
        for(var i = 0 ; i < data.length ; i++){
            for(var prop in data[i]){
                if(prop == fieldName){
                    var key = data[i][prop]
                    var rows;
                    var cols;
                    for(var abc in rowsSortMap){
                    	if(abc==key){
                    		rows = rowsSortMap[abc] * 1;
                    	}              
                    }
                    for(var bcd in colsSortMap){
                    	if(bcd==key){
                    		cols = colsSortMap[bcd] * 1;
                    	}              
                    }
                    $(target).bootstrapTable('mergeCells',{index:i, field:fieldName, colspan: cols, rowspan: rows});
                    i += rows - 1;  
                    break;
                } 
            }
        }
        
        
    };
    

    以上为JS方法 实现了动态调整bootStrapTable表格,分为行方向与列方向的遍历以及对应字段值的匹配

    在onloadSuccess中指定即可

    onLoadSuccess:function(){
                    var data = $("#famaModelList").bootstrapTable('getData', true);
                    //合并单元格
                    mergeCells(data, "f_code", "n_oneDayAsset",$('#famaModelList'));
    }
    

    到这里杂技随笔:BootstrapTable 合并单元格,分享完毕了,快去试试吧!


    最后

    • 更多参考精彩博文请看这里:《陈永佳的博客》

    • 喜欢博主的小伙伴可以加个关注、点个赞哦,持续更新嘿嘿!


    展开全文
  • css table 合并单元格

    2018-08-23 19:48:00
    1. css table 合并单元格 colspan:合并列, rowspan:合并行, 合并行的时候,比如rowspan="2",它的下一行tr会少一列; 合并列的时候,比如colspan="2",此行的列会少一列 转载于:...
  • jquery table合并单元格

    千次阅读 2016-12-14 09:32:37
    jquery table合并单元格 (function ($) {  $.fn.extend({  //表格行合并单元格,rowIdx要合并的行序号,从0开始  "colspan": function (rowIdx,thOrtd) {  if(!thOrtd){  thOrt
  • table合并单元格(Jquery 插件)

    千次阅读 2018-11-15 00:43:27
    table合并单元格(Jquery 插件)
  • uni-app uView Ui Table 合并单元格

    千次阅读 2021-05-12 14:04:56
    uni-app uView Ui Table 合并单元格 本组件标签类似HTML的table表格,由table、tr、th、td四个组件组成 table 组件裹在最外层,可以配置一些基础参数 tr 组件用于显示"行"数据 th 组件用于显示表头内容,类似td,...
  • 各种合并单元格的方法,本文提供了六种合并的方法,大家可以按需选择试用自己的方法!
  • bootstrap-Table 合并单元格函数 注意:在传入数据的时候,记得将闯入的数据排序; 比如:mergeCellFun(dataList, ‘mouldNum’); dataList是排序过的; // 表格数据处理 function tableFn(dataList) { $...
  • vue中的table合并单元格用法

    千次阅读 2019-11-05 10:58:06
    colspan用来指定单元格横向跨越的列数:colspan就是合并列的,colspan=2的话就是合并两列 ...vue中的table合并单元格 </td> <td width="130px" :rowspan="infoa.infoList.length" v-if="i...
  • layui table合并单元格后的checkbox 点击checkbox因为业务需要,需得到合并的数据但是table.checkStatus(‘grid’)得的到只有选中的一行所以只好通过js动态改变每行的checkbox在这里插 table.on('checkbox(grid)', ...
  • 回答:一、使用Excel开始菜单中的合并功能Excel表格中合并单元格有很多中形式,比如:合并居中、合并单元格、按行合并、跨列居中、合并相同单元格和合并内容。接下来看看具体操作步骤吧!步骤:选中需要合并的单元格...
  • el-table合并单元格

    2021-01-14 09:26:22
    合并单元格 合并单元格 对需要合并的表格绑定 :span-method="objectSpanMethod" 在获取数据后处理数据 与table绑定的数组 = this.mergeTableRow(table绑定的数组, [要合并的值即某列单元格'categoryId',要合并...
  • 合并单元格,如果situation 一致,则合并getSpanArr(data)方法 data就是我们从后台拿到的数据,通常是一个数组;spanArr是一个空的数组,用于存放每一行记录的合并数;pos是spanArr的索引。如果是第一条记录(索引为0...
  • element-ui table 合并单元格 封装方法可直接调用即可 我们在使用table表格时总会遇到需要合并单元格的需求 示例 请看代码 <el-table :data="tableData" class="table" border ref="multipleTable" ...
  • CSS Table合并单元格

    千次阅读 2019-03-15 10:20:26
    colspan:左右合并单元格的个数; 用法:colspan=“3” 横向合并三个单元格‘。 rowspan:上下合并单元格的个数; 用法:rowspan=&amp;amp;quot;3&amp;amp;quot;垂直合并三个单元格。 &amp;amp;amp;lt;...
  • el-table合并单元格(vue+element) - 先在el-table放入:span-method="arraySpanMethod" <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}" :data="merchantList" border :span-method=...
  • bootstrap table 合并单元格

    千次阅读 2017-12-16 09:34:44
    客户端运用bootstrapTable 的mergeCells属性合并单元格来达到报表分析展示的直观效果 JavaScript代码 声明mergeCells函数,如: /** * 合并单元格 * @param data 原始数据(在服务端完成排序) * @...
  • table合并单元格(Jquery 插件

    千次阅读 2013-12-04 10:58:01
    table合并单元格(Jquery 插件) table{ border-collapse:collapse;} table th{ background:#ddd; } table td,table th{ padding:2px 10px;border:1px solid #999;} 姓名 学科
  • element table合并单元格

    千次阅读 2019-06-19 13:45:29
    在使用element table这个组件的时候,发现有些数据需要合并行,有些数据又要合并列,table自带了span-method这个方法,可以根据需要进行单元格合并。 getSpanArr(data) { this.spanArr = [] for (var i = 0; i &...
  • el-table合并单元格合并异常问题

    千次阅读 2019-03-21 17:34:46
    element-ui table组件合并单元格功能问题 在项目中要求合并单元格,看文档 异常具体表现为单元格向后移了一格,原本第三格的内容移到了第四格,最后一格的数据被挤丢了。至于为什么会这样不清楚,希望有人告诉我问...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,194
精华内容 14,077
关键字:

table合并单元格