精华内容
下载资源
问答
  • js表格合并行
    2018-06-13 11:08:00
    jQuery.fn.rowspan = function(colIdx) { 
    	var colNum = 0;
    	$('tr', this).each(function(row) { 
    		colNum = $(this).children().size();
    	});
    	return this.each(function(){ 
    		var that=null; 
    		$('tr', this).each(function(row) { 
    			if($(this).children().size()==colNum){
    				$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) { 
    					if (that!=null && $(this).html() == $(that).html()) { 
    						rowspan = $(that).attr("rowSpan"); 
    						if (rowspan == undefined) { 
    							$(that).attr("rowSpan",1); 
    							rowspan = "1"; 
    						} 
    						rowspan = Number(rowspan)+1; 
    						$(that).attr("rowSpan",rowspan); 
    						$(this).attr("class","needremove"); 
    						$(this).hide(); 
     
    					} else { 
    						that = this; 
    					} 
    				}); 
    			}
    			
    		}); 
    	}); 
    };

    使用:

     <script type="text/javascript">
    $(document).ready(function() {
    //todoTable 是表格的id 
    //先隐藏 ,在根据class 移除节点,如果直接移除 合并行会出现部分相同数据不能合并的问题
    		$("#todoTable").rowspan(0/*需要合并的列,从0开始*/);
    		$("#todoTable").rowspan(1);
    var arr = $(".needremove");
    		for (i = arr.length-1; i >=0; i--) {
    			if (arr[i] != null) {
    				arr[i].parentNode.removeChild(arr[i]);
    			}
    		}
    	});
    </script>

     

    转载于:https://my.oschina.net/u/3715963/blog/1829392

    更多相关内容
  • 表格行列合并JS

    2013-01-09 16:47:49
    //函数说明:合并指定表格表格id为_w_table_id)指定(行数为_w_table_rownum)的相同文本的相邻单元格 //参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #...
  • elementUI表格合并行

    千次阅读 2021-07-30 13:10:01
    } }, // elementUI的合并行方法 mergeTableRow({ row, column, rowIndex, columnIndex }) { // console.log(row, column, rowIndex, columnIndex); const span = column["property"] + "-span"; if (row[span]) { ...

    在这里插入图片描述

    <el-table
              border
              ref="table"
              height="520"
              :cell-class-name="mergeTableRowCss"
              :span-method="mergeTableRow"
              :data="directoryPriceTableData"
            >
              <el-table-column header-align="center" label="用电分类">
                <el-table-column
                  prop="name"
                  min-width="110"
                  label="一级用电分类"
                ></el-table-column>
                <el-table-column
                  prop="name2"
                  min-width="110"
                  label="二级用电分类"
                ></el-table-column>
              </el-table-column>
    
              <el-table-column
                header-align="center"
                label="电度电价(含政府性基金及附加)"
              >
                <el-table-column
                  prop="prc01"
                  width="100"
                  label=" 220 - 380伏"
                ></el-table-column>
                <el-table-column
                  prop="prc02"
                  width="90"
                  label="1 - 10千伏"
                ></el-table-column>
                <el-table-column
                  prop="prc03"
                  label="10 - 20千伏"
                  width="100"
                ></el-table-column>
                <el-table-column
                  prop="prc04"
                  label="35 - 110千伏"
                  width="110"
                ></el-table-column>
                <el-table-column
                  prop="prc05"
                  label="110 - 220千伏"
                  width="120"
                ></el-table-column>
                <el-table-column
                  prop="prc06"
                  label="220 - 500千伏"
                  width="120"
                ></el-table-column>
                <el-table-column
                  prop="prc07"
                  label=" 500 - 750千伏"
                  width="120"
                ></el-table-column>
                <el-table-column
                  prop="prc08"
                  label="750千伏及以上"
                  width="120"
                ></el-table-column>
              </el-table-column>
              <el-table-column header-align="center" label="基本电价">
                <el-table-column
                  prop="capPrc"
                  width="170"
                  label="最大需量(元/千瓦/月)"
                ></el-table-column>
                <el-table-column
                  prop="dmdPrc"
                  width="200"
                  label="变压器容量(元/千伏安/月)"
                ></el-table-column>
              </el-table-column>
            </el-table>
    
    getData(){
    	// 获取数据后调用封装的方法
    	this.directoryPriceTableData = this.mergeTableRowMethod(res.result, ["name"]);// 意思是name的列有重复的值就要合并
    },
    // 被合并行的样式
    mergeTableRowCss({ row, column, rowIndex, columnIndex }) {
       console.log(row, column, rowIndex, columnIndex);
       if (columnIndex === 0 || columnIndex === 1) {
         return "table-header-css";
       }
     },
     // elementUI的合并行方法
     mergeTableRow({ row, column, rowIndex, columnIndex }) {
       // console.log(row, column, rowIndex, columnIndex);
       const span = column["property"] + "-span";
       if (row[span]) {
         return row[span];
       }
     },
     // 封装合并行逻辑
     mergeTableRowMethod(data, merge) {
       if (!merge || merge.length === 0) {
         return data;
       }
       merge.forEach((m) => {
         const mList = {};
         data = data.map((v, index) => {
           const rowVal = v[m];
           if (mList[rowVal] && mList[rowVal].newIndex === index) {
             mList[rowVal]["num"]++;
             mList[rowVal]["newIndex"]++;
             data[mList[rowVal]["index"]][m + "-span"].rowspan++;
             v[m + "-span"] = {
               rowspan: 0,
               colspan: 0,
             };
           } else {
             mList[rowVal] = { num: 1, index: index, newIndex: index + 1 };
             v[m + "-span"] = {
               rowspan: 1,
               colspan: 1,
             };
           }
           return v;
         });
       });
       return data;
     },
    
    /deep/.el-table__body tr:hover > td.table-header-css {
      background-color: #fff0e3 !important;
    }
    
    /deep/.table-header-css {
      background-color: #fff0e3;
    }
    
    展开全文
  • 主要介绍了javascript合并表格单元格实例代码,在某些应用中需要动态的合并单元格,感兴趣的朋友可以参考一下
  • elementUI表格合并行数据

    工作中经常会遇到需要将表格合并的需求,elementUI官方文档也有对应的方法,但是不够详细,发个贴记录一下学习之路

    首先需要一个数组记录需要合并的行数据,再来一个变量记录数组的下标

    然后就是写一个方法 遍历数据,得到需要合并的行数据,

    <el-table
            class="table"
            :data="data"
            border
            style="width: 100%"
            size="mini"
            :header-cell-style="headerStyle"
            :cell-style="cellStyle"
            height="37rem"
            :span-method="objectSpanMethod"
          >
            <el-table-column label="本周签到表(06.27-07.01)" align="center">
              <el-table-column
                :prop="key.value"
                :label="key.label"
                v-for="(key, index1) in tableheader"
                :key="index1"
                align="center"
                :width="index1 == 0 ? 120 : ''"
                :formatter="index1 == 3 ? valformat : format"
              >
              </el-table-column>
            </el-table-column>
          </el-table>
    // 获取需要合并的数据
    getSpanArr(data) {
            // data就是我们从后台拿到的数据
          for (var i = 0; i < data.length; i++) {
            if (i === 0) {
              this.span.push(1);
              this.index= 0;
            } else {
              // 判断当前元素与上一个元素是否相同
              if (data[i].date === data[i - 1].date) {
                this.span[this.index] += 1;
                this.span.push(0);
              } else {
                this.span.push(1);
                this.index= i;
              }
            }
          }
        },
    
    // 表格合并行方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 0) {
            const _row = this.span[rowIndex];
            return {
              // [0,0] 表示这一行不显示, [2,1]表示行的合并数
              rowspan: _row,
              colspan: 1
            };
          }
        },

    最后是效果图

    展开全文
  • 最近工作中遇到一个需求,是要做一个页面放张大表格用来显示数据项,纯粹...然而又被提出了一个需求,需要相邻的相同值的数据项进行单元格合并,这就醉了。没办法,只能想办法解决,下面通过这篇文章来一起看看吧。
  • iview 表格合并行

    2022-01-08 13:34:27
    // 合并表格方法 handleSpan ({ row, column, rowIndex, columnIndex }) { // console.log(column) if (column.mergeKey === 'standardId_1') { return this.mergeAction('standardId_1', rowIndex, column); }...

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    // 合并表格方法
          handleSpan ({ row, column, rowIndex, columnIndex }) {
              // console.log(column)
              if (column.mergeKey === 'standardId_1') {
                  return this.mergeAction('standardId_1', rowIndex, column);
              }
              if (column.mergeKey === 'standardId_2') {
                  return this.mergeAction('standardId_2', rowIndex, column);
              }
              if (column.mergeKey === 'standardId_3') {
                  return this.mergeAction('standardId_3', rowIndex, column);
              }
              if (column.mergeKey === 'standardId_4') {
                  const cols = ['A', 'AA', 'AAA'];
                  // 一般项 合并列
                  if(cols.includes(column.slot) && row.standardType_4 === 'YB') {
                      if(column.slot === 'A'){
                          return [1, 3];
                      }else {
                          return [0, 0];
                      }
                  }else {
                      return this.mergeAction('standardId_4', rowIndex, column);
                  }
              }
          },
          mergeAction(val, rowIndex, colData) {
              let _row = this.rowMergeArrs[val].rowArr[rowIndex];
              let _col = _row > 0 ? 1 : 0;
              return [_row, _col];
          },
          rowMergeHandle(arr, data) {
              if (!Array.isArray(arr) && !arr.length) return false;
              if (!Array.isArray(data) && !data.length) return false;
              let needMerge = {};
              arr.forEach(i => {
                  needMerge[i] = {
                      rowArr: [],
                      rowMergeNum: 0
                  };
                  data.forEach((item, index) => {
                      if (index === 0) {
                          needMerge[i].rowArr.push(1);
                          needMerge[i].rowMergeNum = 0;
                      } else {
                          if (item[i] === data[index - 1][i]) {
                              needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                              needMerge[i].rowArr.push(0);
                          } else {
                              needMerge[i].rowArr.push(1);
                              needMerge[i].rowMergeNum = index;
                          }
                      }
                  });
              });
              return needMerge;
          },```
    //重新拼接表格
                    this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData);
                          // 有合并项的列
          needMergeArr: [
            "standardId_1",
            "standardId_2",
            "standardId_3",
            "standardId_4",
          ],
    
    展开全文
  • (function ($) { ... //表格合并单元格,colIdx要合并的列序号,从0开始 "rowspan": function (colIdx) { return this.each(function () { var that; $('tr', this).each(function (row) { $('t.
  • 一个js例子实现了表格的动态合并,拆分单元格
  • vue element实现表格合并行数据  本文实例为大家分享了vue element实现表格合并行数据的具体代码,供大家参考,具体内容如下 支持不分页的表格数据,分页的表格数据还有小bug <template> <el-container> ...
  • elementUI表格合并行(vue)

    千次阅读 2021-07-04 11:35:17
    eliment ui官网中只是讲解了合并某一列的固定该怎么做(就是类似于每次都是合并),而我这是合并不同数量的。 于是我陷入了纠结和不解中,不知道该怎么做。 这时可爱的娜娜姐,出手编写了解决问题的代码,...
  • js 实现表格合并单元格

    千次阅读 2022-04-15 16:01:14
    需求 实现下面的表格效果 代码: //利用去重原理 function table(dom) { var arr = []; var f= document.getElementsByClassName(dom); for (let i = 0; i < f.length; i++) { if (arr...
  • 相邻表格相同数据看起来不好看,而且显得冗余,如果将相邻表格的相同数据进行合并处理,不仅看起来美观很多,而且显得更加的专业。
  • Ant design vue 表格合并 合并行 合并列

    千次阅读 2022-06-24 20:46:58
    Ant design vue 合并单元格 合并行, 合并列
  • 计算各个列的合并数据,得到该数据后,... * 计算合并行 * @param rows */ function calculateMergeCells(rows) { if (rows.length == 0) return; //初始化合并原始数据 var initData = JSON.parse(JSON.stringif
  • element 表格(table)合并行
  • element-ui 合并行或列 table表格合并行和列 table :span-method(行合并)
  • 在数据表格中,对于按某个分类展示数据其分类下又有多个细分的嵌套细分项,如省市区昵称,省下面有多个市,市下面有多个区,区下面有昵称,需要实现跨行合并,且操作按钮以分类为单位(即操作按钮需按照分类合并)。...
  • 1、需求如图(表格中编辑间隔时间和备注): 2、直接贴代码: html: <a-table bordered :columns="inspectionColumns" :dataSource="inspectionData" :pagination="false" rowKey="id" > <template...
  • JS单元格合并

    千次阅读 2021-12-14 11:38:58
     在Web中经常需要合并单元格,例如对于下面一个表格: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table, ..
  • JS中table表格行合并

    千次阅读 2019-10-12 13:33:48
    //合并行 for(var m=0;m<10;m++){ var eleList = $("#supplyTable tbody .tr_list[simpletip="+m+"]"); var eleList2 = $("#supplyTable tbody .companyName_td[simpletip="+m+"]"); var eleList3 =...
  • 主要是对JavaScript动态操作表格实例(添加,删除,列及单元格)进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
  • element表格行合并通用方法。
  • 原生table表格实现行合并,列合并

    千次阅读 2021-09-24 22:35:43
    } </style> <script> export default { name: "App", components: {}, data() { return { size: "", flag: false, // originData 为后端原始正常的数据, 此数据按正常表格展示 一的数据 // 保证数组里每一个...
  • el-table表格合并行、合并列

    千次阅读 2022-06-22 16:14:06
    }} </template> </el-table-column> </el-table> </div> </div> </template> <script> //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) //例如:import 《组件名称》 from '...
  • js自动合并table相同的(也适用于自动生成的table)
  • JS实现表格行合并

    2021-06-26 03:15:40
    为了美观表格,常常需要将表格中相同内容的进行合并表格中的专用标签就是rowspan,描述一下就是将相邻2或多行中相同位置的列进行合并,当然合并使用前提的,如内容相同,ID相同等等。这里整个代码都比较简单,...
  • 对table表格进行操作,两根据点击添加 删除按钮 进行单元格的删除 添加 合并单元格。
  • js 渲染给表格合并

    2022-03-27 21:05:00
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0051)... <...

空空如也

空空如也

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

js表格合并行