精华内容
下载资源
问答
  • js合并单元格行和列
    2017-10-12 12:47:00
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <HTML> 
    <HEAD> 
    <TITLE> New Document </TITLE> 
    <meta charset="UTF-8"/>
    
    </HEAD> 
    <SCRIPT LANGUAGE="JavaScript"> 
    function autoRowSpan(tb,row,col) 
    { 
    var lastValue=""; 
    var value=""; 
    var pos=1; 
    for(var i=row;i<tb.rows.length;i++){ 
    value = tb.rows[i].cells[col].innerText; 
    if(lastValue == value){ 
    tb.rows[i].deleteCell(col); 
    tb.rows[i-pos].cells[col].rowSpan = tb.rows[i-pos].cells[col].rowSpan+1; 
    pos++; 
    }else{ 
    lastValue = value; 
    pos=1; 
    } 
    } 
    } 
    
    </SCRIPT> 
    <BODY οnlοad="autoRowSpan(tb,0,0)"> 
    <TABLE id="tb" border="1"> 
    <THEAD> 
    <TR > 
    <TD>国家</TD> 
    <TD>地区</TD> 
    </TR> 
    </THEAD> 
    <TR> 
    <TD>中国</TD> 
    <TD>河南</TD> 
    </TR> 
    <TR> 
    <TD>中国</TD> 
    <TD>四川</TD> 
    </TR> 
    <TR> 
    <TD>中国</TD> 
    <TD>北京</TD> 
    </TR> 
    <TR> 
    <TD>美国</TD> 
    <TD>纽约</TD> 
    </TR> 
    <TR> 
    <TD>美国</TD> 
    <TD>洛杉矶</TD> 
    </TR> 
    <TR> 
    <TD>英国</TD> 
    <TD>伦敦</TD> 
    </TR> 
    </TABLE> 
    </BODY> 
    </HTML> 

     

    转载于:https://www.cnblogs.com/xzma/p/7655573.html

    更多相关内容
  • 在项目中遇到一个需求合并单元格行同时合并,抽个方法做个记录,可以直接引入min.js中直接使用

    在项目中遇到一个需求合并单元格行跟列同时合并,抽个方法做个记录,可以直接引入min.js中直接使用

    /**
     * 
     * @param {*} table vue对象, Element-ui Table 插件
     * @param {*} colMap 数组, 需要合并的列名,如: ['c1','c2','c2']
     * @param {*} isSpanRow 布尔,是否合并行
     * @param {*} isSpanCol 布尔,是否合并列
     * @returns 二维数组,Table的显示结果
     *
     * mergeCell(this.$refs.dTable, ['c1', 'c2', 'c3'], true, true)
     */
     var mergeCell = function(table, colMap, isSpanRow = true, isSpanCol = true) {
      
      var list = table.tableData
    
      // table.tableData 中 每行的数据是一个对象,不能直接的反应显示的顺序
      // 即你不能知道第一列右则的列是那个.
      // 需要通过table.columns建立显示的顺序
      var columns = []
      for (const item of table.columns) {
        // console.log(item);
        columns.push(item.property)
      }
    
      // 结果应是一个二维数组
      // 先充填数据,使用其成为全显示的数组
      var result = []
      for (let row = 0, rowLen = list.length; row < rowLen; row++) {
        const ss = []
        for (let col = 0, colLen = columns.length; col < colLen; col++) {
          ss.push([1, 1])
        }
        result.push(ss)
      }
    
      // 合并行
      if (isSpanRow) {
        result = mergeRow(list, columns, colMap, result)
        // console.log(result);
      }
    
      // 合并列
      if (isSpanCol) {
        result = mergeCol(list, columns, colMap, result)
        // console.log(result);
      }
    
      return result
    }
    
    var mergeRow = function(list, columns, colMap, result) {
      for (const item of colMap) {
        const p = {
          colKey: item,
          col: columns.indexOf(item),
          row: 0,
          val: ''
        }
        for (let row = 0, rowLen = list.length; row < rowLen; row++) {
          if (p.val === list[row][p.colKey]) {
            result[p.row][p.col][0] += 1
            result[row][p.col][0] = 0
          } else {
            p.row = row
            p.val = list[row][p.colKey]
          }
        }
      }
      return result
    }
    
    var mergeCol = function(list, columns, colMap, result) {
      for (let row = 0, rowLen = list.length; row < rowLen; row++) {
        const p = {
          col: 0,
          row: row,
          val: ''
        }
    
        for (let col = 0, colLen = columns.length; col < colLen; col++) {
          if (!colMap.includes(columns[col])) {
            p.col = col
            p.val = list[row][columns[col]]
            continue
          }
    
          if (p.val === list[row][columns[col]]&&result[p.row][p.col][0]==result[p.row][col][0]) {
            // console.log(result[row][col]);
            result[p.row][p.col][1] += 1
            result[p.row][col][1] = 0
          } else {
            p.col = col
            p.val = list[row][columns[col]]
          }
        }
      }
    
      return result
    }
    export default mergeCell
    

    展开全文
  • 原生js实现表格的行合并列合并

    表格实现效果

    在这里插入图片描述

    主要属性

    • colspan=“5” //列合并5列
    • rowspan=“5” //行合并5行
     <div class="table-wrapper">
          <div class="table-head">
            <table>
              <colgroup>
                <col style="width:60px;" />
                <col style="width:70px;" />
                <col style="width:70px;" />
                <template v-for="item in 26">
                  <col /> 
                </template>
              </colgroup>
              <thead>
                <!-- 第一行标题 -->
                 <tr class="firstTr">
                  <td colspan="53">1</td>
                </tr>
                <!-- 第二行统计时间 -->
                <tr class="firstTr">
                  <td colspan="53" style="text-align:left;">统计时间:20211101--20211102</td>
                </tr>
    
                <!-- 第三行-->
                <tr class="firstTr">
                  <td rowspan="4">序号</td>
                  <td rowspan="4">公司名称</td>
                  <td rowspan="4">1</td>
                  <td rowspan="4">2</td>
                  <td colspan="17" rowspan="1">3</td>
                  <td colspan="19"  rowspan="1">4</td>
                  <td colspan="13"  rowspan="1">5</td>
                  
                </tr>
    
                <!-- 第四行-->
                <tr class="secondTr">
                 
                    <td colspan="4"  rowspan="2">
                      5
                    </td>
                    <td  colspan="4" rowspan="2">
                    6
                    </td>
                    <td  colspan="4" rowspan="2">
                     7
                    </td>
                    <td  colspan="4" rowspan="2">
                     8
                    </td>
                    <td rowspan="3">
                    合计
                    </td>
    
                     <td colspan="9" rowspan="1">
                     9
                    </td>
                     <td colspan="9"  rowspan="1">
                      10
                    </td>
                     <td rowspan="3">
                    合计
                    </td>
    
                      <td colspan="4"  rowspan="2">
                      11
                    </td>
                     <td colspan="4"  rowspan="2">
                      12
                    </td>
                    <td colspan="4"  rowspan="2">
                     13
                    </td>
                     <td rowspan="3">
                    合计
                    </td>
                </tr>
                
                 <!-- 第五行-->
                  <tr class="secondTr">
                  <td colspan="4">
                    14
                  </td>
                   <td colspan="4">
                    15
                  </td>
                   <td rowspan="2">
                    16
                    </td>
                    <td colspan="4">
                    17
                  </td>
                   <td colspan="4">
                    18
                  </td>
                   <td rowspan="2">
                    合计
                    </td>
                </tr>
    
                 <!-- 第六行-->
                <tr class="secondTr">
                  <template v-for="item in 4">
                  <td colspan="1">
                    提交
                    </td>
                    <td colspan="1">
                    通过
                  </td>
                   <td colspan="1">
                    退回
                  </td>
                   <td colspan="1">
                    小计
                  </td>
                  </template>
                   <template v-for="item in 7">
                    <td colspan="1">
                      录入
                    </td>
                    <td  colspan="1">
                     通过
                    </td>
                    <td  colspan="1">
                     退回
                    </td>
                    <td  colspan="1">
                     小计
                    </td>
                 </template>
                </tr>
              </thead>
            </table>
          </div>
          <div class="table-body">
            <table>
              <colgroup>
                <col style="width:60px;" />
                <col style="width:70px;" />
                <col style="width:70px;" />
                <template v-for="item in 26">
                  <col />
                </template>
              </colgroup>
              <tbody>
                <tr v-for="(item,index) in pqListData" :key="index" :class="{comTr: item.comFlag == '1'}">
                  <template v-if="item.xuhao==0">
                      <td colspan="3">合计</td>
                  </template>
                  <template v-else>
                      <td>{{item.xuhao}}</td>
                        <!-- arrIndex 为“峡谷”等公司名称在数组中第一次出现位置的索引 -->
                         <!-- getKeyCount方法返回“峡谷”等公司名称一共有几条数据进行行合并 -->
                        <template v-if="arrIndex.includes(index)">
                             <td :rowspan="getKeyCount('comname',item.comname)">{{item.comname}}</td>
                        </template>
                      <td>{{item.opername}}</td>
                  </template>
                  
                  
                  <td>{{item.A}}</td>
    
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
    
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
    
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
       
    
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
           
    
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
    
    
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
    
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
    
                   <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
    
                    <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
                  <td>{{item.A}}</td>
    
    
    
                </tr>
                <tr v-if="pqListData == ''" class="nodata">
                  <td colspan="29" style="text-align: center">暂无数据</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
    

    methods:

       // 计算出现次数 
        getKeyCount(key,value){
          let result = [];
            for (let [index, elem] of this.pqListData.entries()) {
                elem[key] == value && result.push(index)
            }
            return result.length
        },
    
    	//从后台查询到的数据
    		getListData(){
    			let data = [.....]//后台获取到的数据
    			let arr = ["峡谷","峡谷A","峡谷B"];
                
                for(let i = 0 ; i < arr.length; i++){
                //第一次出现的索引
                  let is = data.findIndex(p=>p.comname == arr[i])
                   if(is!==-1){
                     this.arrIndex.push(is)
                   } 
                }
    	}
    
    展开全文
  • 合并单元格方法 const getSpanArr = (data) => { // data就是表格数据 const spanArr = [] let index = 0 for (let i = 0; i < data.length; i++) { if(i === 0){ spanArr.push(1), index = i

    效果图:
    在这里插入图片描述

    合并单元格方法

        const getSpanArr = (data) => {  // data就是表格数据
            const spanArr = []
            let index = 0
            for (let i = 0; i < data.length; i++) {
               if(i === 0){
                   spanArr.push(1),
                    index = i
               }else  if (data[i].APMP === data[i - 1].APMP){  // 判断条件 相等就累加1
                   spanArr[index] += 1
                   spanArr.push(0)
               }else {
                   spanArr.push(1)
                   index = i
               }
            }
            return spanArr  // 格式类似就是[3,0,0,3,0,0]
        }
    

    el-table中的:span-method="objectSpanMethod"方法

    const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
        if(columnIndex === 0){
          const cRow = props.columnRowSpans[rowIndex]
           const cCol = cRow > 0 ? 1 : 0
           return {
               rowspan: cRow, // 合并的行数
               colspan: cCol // 合并的列数
           }
        }
    }
    
    展开全文
  • demo实例 合并紧挨着的 单元格 通过js实现 希望对大家有帮助
  • 主要介绍了javascript合并表格单元格实例代码,在某些应用中需要动态的合并单元格,感兴趣的朋友可以参考一下
  • spreadjs_包含合并单元格的数据绑定-demo
  • Table相同单元格自动合并,使用js来实现此效果,具体代码下,感兴趣的朋友可以参考下
  • 1.在el-table中添加:span-method=objectSpanMethod属性来控制合并单元格,如下图 2.合并代码,每一都要设置一个不同的key,这样可以防止合并的时候上下内容一样导致错误的问题 objectSpanMethod({ row, column...
  • 主要介绍了JS实现动态修改table及合并单元格的方法,结合完整实例形式分析了JS动态遍历及修改table单元格的具体操作技巧,需要的朋友可以参考下
  • 前端:JS中表格合并单元格

    千次阅读 2020-11-11 10:40:56
    * 列合并单元格(如果结束传0代表合并所有) * @param table 表格的ID * @param startRow 起始 * @param endRow 结束 * @param col 合并的号,对第几列进行合并(从0开始)。第一从0开始 */ function ...
  • 本代码是将layui的单元格进行合并,通过js的方式,动态根据表格的数据进行rowspan赋值,并展现合并后的表格
  • 根据网友提出的“htmljs合并单元格 excel怎样合并单元格”等问题,Excel办公网整理了各大知名网站有关“htmljs合并单元格 excel怎样合并单元格”的一些信息:题目:我想在网页中调用js程序来显示当前时间。...
  • 主要为大家详细介绍了bootstrap table实现合并单元格效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 动态合并单元格

    2018-01-08 21:22:39
    JS动态合并单元格算法,利用一个结果集List来生成,数据过多会加重客户断负担 --%> ${status.index>=tempEnd}"> <c:set var="rowspanCount" value="0"></c:set>清楚历史数据 --%> ${list}" varStatus="status2...
  • vue element-ui合并单元格合并指定 参考文章:element-ui element-plus合并、el-table 合并,可以指定要合并名称_东明之羞的博客-CSDN博客 基于上文对方法做了扩展 项目vue版本vue3,其他版本自测 ...
  • 表格行列合并JS

    2013-01-09 16:47:49
    //参数说明:_w_table_colnum 为需要合并单元格的所在。为数字,从最左边第一列为1开始算起。 //函数说明:合并指定表格(表格id为_w_table_id)指定(行数为_w_table_rownum)的相同文本的相邻单元格 //参数...
  • 原生JS写的表头固定及左边固定功能,原创代码,代码比较简单,兼容IE8+、谷歌、火狐等主流浏览器。当前版本为1.6,此版本支持合并单元格后的表格,并修正了当表格行数较多时的性能问题。
  • 动态生成表格,并自动合并相同单元格插件,可在bootstrapTable子表使用
  • View UI (iview)表格合并单元格/合并)

    千次阅读 热门讨论 2021-05-21 13:15:46
    有时我们在开发过程中会遇到表格里有合并单元格的需求。 今天以View UI (iview)组件库为例。 1. 打开iview官网-table会发现有合并单元格示例: 2. 但是在实际项目中,无法做到像上边代码那样通过 rowIndex ...
  • js合并单元格

    2021-06-19 09:06:11
    // 合并单元格function hbdyg() {var tab = document.getElementById("spec_input_tab"); //要合并的tableIDvar maxCol ... //maxCol:合并单元格作用到多少console.log(maxCol);if (tab != null) {for (var col =...
  • 1)方法: /*合并指定表格(表格id为table_id)指定数为table... param:table_colnum 为需要合并单元格的所在。为数字,从最左边第一列为1开始算起。*/ function table_rowspan(table_id, table_colnum)
  • Easyui 中没有自动合并的属性,所以得自己写方法 我们在easyui的表格的onLoadSuccess事件 onLoadSuccess:function(data1){ tbmerf('tb',['djbh','spmc','ysmc','xsxzmc','khmc','xymc','ygmc','rq','jhrq','ztrq','...
  • 各种合并单元格的方法,本文提供了六种合并的方法,大家可以按需选择试用自己的方法!
  • 原生js合并单元格

    2022-07-12 11:43:09
    原生js简单封装合并单元格
  • table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二,对第一添加rowspan 【table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二,对第一添加rowspan】
  • 带富文本编辑器以及支持表格操作,可拉伸单元格宽度、增加、增加合并单元格
  • JS单元格合并

    2021-12-14 11:38:58
     在Web中经常需要合并单元格,例如对于下面一个表格: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table, ..
  • jquery datatable 单元格合并,通过js实现相同内容单元格动态合并!!!jquery datatable 单元格合并,通过js实现相同内容单元格动态合并!!!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,797
精华内容 7,518
关键字:

js合并单元格行和列