devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

js 自定义表格的合并单元格、插入行列、删除行列_js合并单元格

作者：小丑西瓜9 | 2024-06-03 21:00:31

赞

踩

js合并单元格

第一步，给表格添加事件

  1.     export var finalCollsArr = null // 用来存放单元格的id数组
  2.     let flag = false// 当鼠标被按下时，为true,放开是为true
  3.     let indexs = []// 用来存放鼠标经过的单元格在整个表格的位置，鼠标按下时被初始化，
  4.     table.addEventListener('mousedown', (e) => {
  5.         getTbList(table) // 获取表格的单元格id
  6.         if (e.button == 0) {
  7.             flag = true
  8.             indexs = []
  9.         }
  10.  
  11.  
  12.     }, false)
  13.  
  14.     tableNode.addEventListener('mousemove', (e) => {
  15.         if (flag) { // 只有鼠标被按下时，才会执行复合代码
  16.             search(e.target, indexs)
  17.         }
  18.     }, false)
  19.  
  20.     tableNode.addEventListener('mouseup', () => {
  21.         flag = false
  22.         finalCollsArr = collsDistribute(indexs)
  23.  
  24.     }, false)

第二步：获取单元格在表格中id分布，获取鼠标选中的单元格id分布

  1. // 整个单元格的id分布，在删除行列，插入行列中有使用到
  2. export var list = new Array()
  3.  
  4. /**
  5.  * 获取单元格id
  6.  * @param {表格节点} curTable 
  7.  */
  8. export const getTbList = (curTable) => {
  9.     if (!curTable) {
  10.         return
  11.     }
  12.     const rowLength = curTable.rows.length 
  13.     const colLength = getCellLength(curTable)
  14.     // let arr = new Array(colLength).fill('undefined');
  15.     // list = new Array(rowLength).fill(arr);
  16.     list = new Array()
  17.     for (let i = 0; i < rowLength; i++) {
  18.         let arr = []
  19.         for (let j = 0; j < colLength; j++) {
  20.             arr.push('undefined')
  21.         }
  22.         list.push(arr)
  23.     }
  24.  
  25.     let rowNum = 0;
  26.     let colNum = 0
  27.  
  28.     for (let i = 0; i < rowLength; i++) {
  29.         for (let j = 0; j < colLength; j++) {
  30.             // 获取单元格
  31.             let tdNode = curTable.rows[rowNum].cells[colNum]
  32.             if (!tdNode) {
  33.                 continue
  34.             }
  35.             for (let k = j; k < colLength; k++) {
  36.                 if (list[i][k] != 'undefined' ) {
  37.                     continue
  38.                 }
  39.                 list[i][k] = tdNode.getAttribute('id')
  40.                 j = k;
  41.                 break
  42.             }
  43.  
  44.             let rowspan = tdNode.rowSpan
  45.             let colspan = tdNode.colSpan
  46.  
  47.  
  48.             if (rowspan>1 && colspan>1) {
  49.                 for (let k = 0; k < rowspan; k++) {
  50.                     for (let z = 0; z < colspan; z++) {
  51.                         list[i+k][j+z] = tdNode.getAttribute('id')
  52.                     }
  53.                 }
  54.             }else if(rowspan>1 || colspan>1){
  55.                 for (let k = 0; k < rowspan; k++) {
  56.                     list[i+k][j] = tdNode.getAttribute('id')
  57.                 }
  58.                 for (let k = 0; k < colspan; k++) {
  59.                     list[i][j+k] = tdNode.getAttribute('id')
  60.                 }
  61.             }
  62.             colNum++;
  63.         }
  64.         rowNum++;
  65.         colNum = 0;
  66.     }
  67.     console.log("list: ", list);
  68.     // 第一行 id
  69.     oneRowId = list[0];
  70.     let newArray = list[0].map(function (col, i) {
  71.         return list.map(function (row) {
  72.             return row[i]
  73.         })
  74.     })
  75.     // 第一列 id
  76.     oneColId = newArray[0]
  77. }
  78.  
  79.  
  80. /**
  81.  * 将鼠标经过的单元格添加到数组
  82.  * @param {单元格} tdNode 
  83.  * @param {数组} indexs 
  84.  * @returns 
  85.  */
  86.  export const search = (tdNode, indexs) => {
  87.     if (tdNode.getAttribute('tagname') != 'entry') {
  88.         return
  89.     }
  90.     let id = tdNode.getAttribute('id')
  91.     let ind = indexs.indexOf(id)
  92.     if (ind == -1) {
  93.         // 不存在
  94.         indexs.push(id)
  95.     } else if (ind != -1 && ind != indexs.length - 1) {
  96.         indexs.splice(ind, 1)
  97.     }
  98. }
  99.  
  100. /**
  101.  * 获取鼠标选中的单元格分布
  102.  * @param {数组} indexs 
  103.  */
  104. export const collsDistribute = (indexs) => {
  105.     let collsArr = new Array()
  106.     let firstId = indexs[0]
  107.     let endId = indexs[indexs.length-1]
  108.     let arrRow = new Array();
  109.     let arrCol = new Array();
  110.     // 获取id在list数组的第几行第几列
  111.     let row = 0
  112.     let col = 0
  113.     for (let i = 0; i < list.length; i++) {
  114.  
  115.         list[i].forEach((id,index)=>{
  116.             if(id === firstId){
  117.                 arrRow[row++] = i
  118.                 arrCol[col++] = index
  119.             }
  120.         });
  121.  
  122.         list[i].forEach((id,index)=>{
  123.             if(id === endId){
  124.                 arrRow[row++] = i
  125.                 arrCol[col++] = index
  126.             }
  127.         });
  128.     }
  129.     arrRow.sort()
  130.     arrCol.sort()
  131.  
  132.     let minCols = Math.min(arrCol[0], arrCol[arrCol.length-1]) 
  133.     let maxCols = Math.max(arrCol[0], arrCol[arrCol.length-1]) 
  134.     let minRows = Math.min(arrRow[0], arrRow[arrRow.length-1])
  135.     let maxRows = Math.max(arrRow[0], arrRow[arrRow.length-1])
  136.     let x = maxRows-minRows+1
  137.     let y = maxCols-minCols+1
  138.  
  139.     for (let i = 0; i < x; i++) {
  140.         let arr = []
  141.         for (let j = 0; j < y; j++) {
  142.             arr.push('false')
  143.         }
  144.         collsArr.push(arr)
  145.     }
  146.     // let arr = new Array(y).fill('false')
  147.     // let collsArr = new Array(x).fill(arr)
  148.  
  149.     for (let i = 0; i < x; i++) {
  150.         console.log("minRows: " + minRows);
  151.         for (let j = 0; j < y; j++) {
  152.             console.log("minCols: " + minCols);
  153.             collsArr[i][j] = list[minRows][minCols++]
  154.             if (minCols>maxCols) {
  155.                 break
  156.             }
  157.         }
  158.         minCols = maxCols + 1 - y
  159.         minRows++
  160.         if (minRows>maxRows) {
  161.             break
  162.         }
  163.     }
  164.  
  165.     // console.log("===================");
  166.     // console.log(collsArr);
  167.     
  168.     return collsArr;
  169.  
  170. }
  171.  
  172. /**
  173.  * 获取表格的列数
  174.  * @param {表格节点} curTable 
  175.  * @returns 
  176.  */
  177.  export const getCellLength = (curTable) => {
  178.     let rowNode = curTable.rows[0]
  179.     let tdNodeList = rowNode.getElementsByTagName('td')
  180.     let length = 0
  181.     for (let i = 0; i < tdNodeList.length; i++) {
  182.         let rowspan = tdNodeList[i].getAttribute('colspan')
  183.         if (rowspan) {
  184.             length += Number(rowspan)
  185.         } else {
  186.             length++
  187.         }
  188.     }
  189.     return length
  190. }
  191.  
  192. /**
  193.  * 获取单元格所在的列数
  194.  * @param {单元格} td 
  195.  * @param {列数组} arr 
  196.  */
  197. export const getCellsTrain = (td, arr) => {
  198.  
  199.     let id = td.getAttribute('id')
  200.  
  201.     // 列位置
  202.     let col = -1
  203.     for (let i = 0; i < arr.length; i++) {
  204.         if(arr[i].indexOf(id) != -1){
  205.             col = i
  206.             break
  207.         }
  208.     }
  209.  
  210.     return col
  211. }
  212.

第三步：合并单元格

  1. /**
  2.  * 合并单元格
  3.  * @param {单元格id数组,第一步中的finalCollsArr} arr 
  4.  */
  5. export const mergeCells = (arr) => {
  6.  
  7.     // 获取行列值最小的单元格
  8.     let id = arr[0][0]
  9.     let td = document.getElementById(id)
  10.     // 行和列
  11.     let colspan = arr[0].length
  12.     let rowspan = arr.length
  13.     td.setAttribute('colspan', colspan)
  14.     td.setAttribute('rowspan', rowspan)
  15.  
  16.     for (let i = 0; i < rowspan; i++) {
  17.         for (let j = 0; j <colspan; j++) {
  18.  
  19.             // 相同的id跳过
  20.             if (arr[i][j] == id) {
  21.                 continue
  22.             }
  23.             let delColls = document.getElementById(arr[i][j])
  24.             // 不存在的单元格跳过
  25.             if (!delColls) {
  26.                 continue
  27.             }
  28.             // 删除单元格
  29.             delColls.parentNode.removeChild(delColls)
  30.         }
  31.     }
  32. }

第四步：插入行

  1. /**
  2.  * 插入行
  3.  * @param {单元格} colls 
  4.  * @param {表格} curTable 
  5.  * @param {true:向上插入, false:向下插入} isUp 
  6.  */
  7. export const addRow = (colls, curTable, isUp) => {
  8.  
  9.     // 获取单元格所在行数
  10.     let row = colls.parentNode.rowIndex; // 行位置
  11.     let rowNode = colls.parentNode // 行节点
  12.     // 获取总列数
  13.     let cellLength = getCellLength(curTable)
  14.  
  15.     let arrId = list[row]
  16.  
  17.     // 判断上(下)一行有没有这一行的元素
  18.     // 在第一行上方插入和在最后一行下方插入就不用判断
  19.  
  20.     if (!((isUp && row == 0) || (!isUp && row == list.length-1))) {
  21.         let arr = isUp ? list[row-1] : list[row+1]
  22.         let redoArr = []
  23.         for (let i = 0; i < arrId.length; i++) {
  24.             if (arrId[i] == arr[i]) {
  25.                 cellLength--
  26.                 if (redoArr.indexOf(arrId[i]) == -1) {
  27.                     redoArr.push(arrId[i])
  28.                 }
  29.             } 
  30.         }
  31.  
  32.         for (let i = 0; i < redoArr.length; i++) {
  33.             let td = document.getElementById(redoArr[i])
  34.             let rowspan = td.rowSpan
  35.             td.rowSpan = rowspan + 1
  36.         }
  37.     }
  38.  
  39.     const trNode = document.createElement('tr')
  40.     trNode.setAttribute("tagname", "row");   // 设置属性
  41.     trNode.setAttribute("id", `tag_${global.id}`);
  42.     global.id = global.id + 1
  43.  
  44.     let tdHtml = ''
  45.     for (let j = 0; j < cellLength; j++) {
  46.         tdHtml += `<td tagname='entry' id='tag_${global.id}' style="padding: 8px; line-height: 1.42857; vertical-align: top; border: 1px solid rgb(221, 221, 221);">&nbsp;</td>`
  47.         global.id = global.id + 1
  48.     }
  49.     trNode.innerHTML = tdHtml
  50.     if (isUp) {
  51.         rowNode.parentNode.insertBefore(trNode, rowNode)
  52.     }else{
  53.         rowNode.parentNode.insertBefore(trNode, rowNode.nextSibling)
  54.     }
  55. }

第五步：插入列

  1. /**
  2.  * 插入列
  3.  * @param {单元格} colls 
  4.  * @param {true:向左插入, false:向右插入} isLeft 
  5.  * @returns 
  6.  */
  7. export const addCell = (colls, isLeft) => {
  8.     
  9.     // const rowLength = curTable.rows.length  // 行數量
  10.  
  11.     // 行转列
  12.     let newArray = list[0].map(function (col, i) {
  13.         return list.map(function (row) {
  14.            return row[i]
  15.         })
  16.     })
  17.     // 获取单元格所在的列
  18.     let col = getCellsTrain(colls, newArray)
  19.     if (col == -1) {
  20.         return
  21.     }
  22.     // 这一列的id
  23.     let arrId = newArray[col]
  24.     let arr = []
  25.     if (!((isLeft && col == 0) || (!isLeft && col == newArray.length-1))) {
  26.         arr = isLeft ? newArray[col-1] : newArray[col+1]
  27.     }
  28.  
  29.     let redoArr = []
  30.  
  31.     for (let i = 0; i < arrId.length; i++) {
  32.         let td = document.getElementById(arrId[i])
  33.  
  34.         // 创建单元格节点
  35.         let newCell = document.createElement('td')
  36.         newCell.setAttribute("tagname", "entry")
  37.         newCell.setAttribute("id", `tag_${global.id}`)
  38.         global.id = global.id + 1
  39.         newCell.setAttribute("style", "padding: 8px; line-height: 1.42857; vertical-align: top; border: 1px solid rgb(221, 221, 221);")
  40.         newCell.innerHTML = '&nbsp;'
  41.  
  42.         if (arr.length>0) {
  43.             if (arr[i] == arrId[i]) {
  44.                 if (redoArr.indexOf(arrId[i]) == -1) {
  45.                     let colspan = td.colSpan
  46.                     td.colSpan = colspan + 1
  47.                     redoArr.push(arrId[i])
  48.                 }
  49.                 continue
  50.             }
  51.             let tdBro = document.getElementById(arr[i])
  52.             if (Array.from(new Set(arrId)).length < arrId.length) {
  53.                 if (td.parentNode.rowIndex != tdBro.parentNode.rowIndex) {
  54.                     if (isLeft) {
  55.                         td = tdBro.nextSibling
  56.                     }else{
  57.                         td = tdBro.previousSibling
  58.                     }
  59.                 }
  60.             }
  61.             
  62.         }else {
  63.             if (td.parentNode.rowIndex != i) {
  64.                 if (col == 0) {
  65.                     td = document.getElementById(newArray[col + 1][i])
  66.                     td.parentNode.insertBefore(newCell, td)
  67.                 } else {
  68.                     td = document.getElementById(newArray[col - 1][i])
  69.                     td.parentNode.appendChild(newCell)
  70.                 }
  71.                 continue
  72.             }
  73.         }
  74.  
  75.         if (isLeft) {
  76.             !td ? curTable.rows[i].appendChild(newCell) : td.parentNode.insertBefore(newCell, td)
  77.         } else {
  78.             td.parentNode.insertBefore(newCell, td.nextSibling)
  79.         }
  80.     }
  81.  
  82. }

第六步：删除行

  1. // colls: 单元格节点, curTable：表格节点
  2. export const delRow = (colls, curTable) => {
  3.     const rowLength = curTable.rows.length  // 行數量
  4.     if (rowLength < 2) {
  5.         alert('不能全部删除！')
  6.         return
  7.     }
  8.     let row = colls.parentNode.rowIndex; // 行位置
  9.     // let col = colls.cellIndex; // 列位置
  10.  
  11.     let rowNode = colls.parentNode // 行节点
  12.     let tdNodeList = rowNode.getElementsByTagName('td')
  13.  
  14.     // 遍历这一行的单元格有没有跨行的,  如果跨行就将下一行的这一列的单元格跨行-1，相同跨列
  15.     for (let i = 0; i < tdNodeList.length; i++) {
  16.         let rowspan = tdNodeList[i].rowSpan
  17.         if (rowspan>1) {
  18.             let colspan = tdNodeList[i].colSpan
  19.             let rowChild = curTable.rows[row+1]
  20.             let colChild = rowChild.cells[i]
  21.             let newCell = document.createElement('td')
  22.             newCell.setAttribute("tagname", "entry")
  23.             newCell.setAttribute("id", `tag_${global.id}`)
  24.             global.id = global.id + 1
  25.             newCell.setAttribute("rowspan", rowspan-1)
  26.             newCell.setAttribute("colspan", colspan)
  27.             newCell.setAttribute("style", "padding: 8px; line-height: 1.42857; vertical-align: top; border: 1px solid rgb(221, 221, 221);")
  28.             newCell.innerHTML = '&nbsp;'
  29.             rowChild.insertBefore(newCell, colChild)
  30.         }
  31.     }
  32.  
  33.     // 遍历有没有被跨行的，将被跨行的跨行数-1
  34.     let arrId = list[row]
  35.     for (let i = 0; i < arrId.length; i++) {
  36.         let td = document.getElementById(arrId[i]) 
  37.         let tdRow = td.parentNode.rowIndex;
  38.         if (row == tdRow) {
  39.             continue
  40.         }
  41.         let rowNum = td.rowSpan
  42.         td.rowSpan = rowNum -1
  43.     }
  44.  
  45.     rowNode.parentNode.removeChild(rowNode)
  46.  
  47. }

第七步：删除列

  1. // colls: 单元格节点, curTable：表格节点
  2. export const delCell = (colls, curTable) => {
  3.  
  4.     const cellLength = getCellLength(curTable)
  5.     if (cellLength < 2) {
  6.         alert('不能全部删除！')
  7.         return
  8.     }
  9.  
  10.     // 行转列
  11.     let newArray = list[0].map(function (col, i) {
  12.         return list.map(function (row) {
  13.             return row[i]
  14.         })
  15.     })
  16.     let col = getCellsTrain(colls, newArray)
  17.     if (col == -1) {
  18.         return
  19.     }
  20.     
  21.     // 这一列的值
  22.     let arrId = newArray[col]
  23.     
  24.     for (let i = 0; i < arrId.length; i++) {
  25.         let td = document.getElementById(arrId[i]) 
  26.         let tdCol = getCellsTrain(td, newArray)
  27.         // 判断单元格有没有被跨列，有，将跨列的 跨列-1
  28.         if (tdCol != col) {
  29.             let colNum = td.colSpan
  30.             td.colSpan = colNum -1
  31.             continue
  32.         }
  33.         // 判断单元格有没有跨列，有跨列，在该单元格的后面添加一个单元格 跨列-1
  34.         let colspan = td.colSpan
  35.         if (colspan>1) {
  36.             let tdNext = td.nextSibling
  37.             let rowspan = td.rowSpan
  38.             let newCell = document.createElement('td')
  39.             newCell.setAttribute("tagname", "entry")
  40.             newCell.setAttribute("id", `tag_${global.id}`)
  41.             global.id = global.id + 1
  42.             newCell.setAttribute("rowspan", rowspan)
  43.             newCell.setAttribute("colspan", colspan-1)
  44.             newCell.setAttribute("style", "padding: 8px; line-height: 1.42857; vertical-align: top; border: 1px solid rgb(221, 221, 221);")
  45.             newCell.innerHTML = '&nbsp;'
  46.             td.parentNode.insertBefore(newCell, tdNext)
  47.         }
  48.  
  49.         td.parentNode.removeChild(td)
  50.     }
  51. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/668906
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号