【前端】实现表格简单操作

最新推荐文章于 2024-06-17 00:04:45 发布
最新推荐文章于 2024-06-17 00:04:45 发布
阅读量952 收藏 22
点赞数 35
分类专栏： 前端 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43231248/article/details/138498171
版权
本文详细介绍了如何使用JavaScript在HTML表格中实现添加行、删除行、逆向选区以及取消合并功能，通过DOM操作如insertAdjacentElement和remove()方法来动态管理表格结构。
摘要由CSDN通过智能技术生成

简言

表格合并基础篇
本篇是在上一章的基础上实现，实现了的功能有添加行、删除行、逆向选区、取消合并功能。
在这里插入图片描述
在这里插入图片描述

功能实现

添加行

添加行分为在上面添加和在下面追加行。
利用 insertAdjacentElement 方法实现，该方法可以实现从前插入元素和从后插入元素。
在这里插入图片描述

删除行

删除当前行就是利用元素remove()方法,从dom树种删除元素。
在这里插入图片描述

逆向选区

逆向选区是指选区从下往上选。
解决思路：记录当前选区时鼠标移动方向，往左上移动则为负,往右下移动则为正。负时在首位插入选中节点，正时从尾部追加选中节点，这样合并只需取第一个选中节点即可。
在这里插入图片描述

取消合并

获取当前元素的rowspan和colspan属性值，然后遍历后面的和下面包含行节点，删除节点的hide类，然后删除当前元素rowspan和colspan属性即可。
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格合并</title>
  <style>
    .zsk-table {
      border-collapse: collapse;
      border: 1px solid;
      font-family: inherit;
      user-select: none;
    }

    .zsk-table tr {
      height: 32px;
    }

    .zsk-table td {
      border: 1px solid;
      height: 32px;
      padding: 16px;
    }


    .amount {
      width: 100px;
    }

    .show-box {
      position: absolute;
      top: -200px;
      left: -200px;
      width: 200px;
      background-color: #eee;
    }

    .show-box>div {
      width: 200px;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #000;
    }

    .show-box>div:hover {
      background-color: #ccc;
      cursor: pointer;

    }

    .select {
      color: #fff;
      background-color: #3987cf;
    }

    .hide {
      display: none;
    }
  </style>
</head>

<body>

  <h1>表格合并</h1>

  <table tabindex="1" class="zsk-table">
    <tr>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
      <td>1-4</td>
      <td>1-5</td>
    </tr>
    <tr>
      <td>2-1</td>
      <td>2-2</td>
      <td>2-3</td>
      <td>2-4</td>
      <td>2-5</td>
    </tr>
    <tr>
      <td>3-1</td>
      <td>3-2</td>
      <td>3-3</td>
      <td>3-4</td>
      <td>3-5</td>
    </tr>
    <tr>
      <td>4-1</td>
      <td>4-2</td>
      <td>4-3</td>
      <td>4-4</td>
      <td>4-5</td>
    </tr>
    <tr>
      <td>5-1</td>
      <td>5-2</td>
      <td>5-3</td>
      <td>5-4</td>
      <td>5-5</td>
    </tr>
  </table>
  <!-- 表格右键 -->
  <div class="show-box">
    <div class="add-down">向下添加一行</div>
    <div class="add-up">向上添加一行</div>
    <div class="delete-cell">删除当前行行</div>
    <div class="merge-cell">合并</div>
    <div class="split-cell">取消合并</div>
  </div>

  <script>
    const table = document.querySelector('.zsk-table')
    const showBox = document.querySelector('.show-box')
    const mergeDiv = document.querySelector('.merge-cell')
    const addDownDiv = document.querySelector('.add-down')
    const addUpDiv = document.querySelector('.add-up')
    const deleteCellDiv = document.querySelector('.delete-cell')
    const cancelDiv = document.querySelector('.split-cell')
    const select = {  // 选中单元格
      value: [[]],
      range: [[], []] //  [start,end]范围
    }
    //  向下添加一行
    addDownDiv.addEventListener('click', (e) => {
      let node = select.value[0][0].parentElement
      let newNode = node.cloneNode(true)
      node.insertAdjacentElement('afterend', newNode)
      clearSelect()

    })
    //  向上添加一行
    addUpDiv.addEventListener('click', (e) => {
      let node = select.value[0][0].parentElement
      let newNode = node.cloneNode(true)
      node.insertAdjacentElement('beforebegin', newNode)
      clearSelect()
    })
    //  删除当前行
    deleteCellDiv.addEventListener('click', () => {
      let node = select.value[0][0].parentElement
      node.remove()
      clearSelect()

    })
    //  取消合并
    cancelDiv.addEventListener('click', () => {
      let node = select.value[0][0]
      let rowspan = node.getAttribute('rowspan')
      let colspan = node.getAttribute('colspan')
      if (!colspan || !rowspan) return
      colspan = Number.parseInt(colspan)
      rowspan = Number.parseInt(rowspan)

      let index = getChildIndex(node)
      let nextNode = node

      for (let i = 0; i < rowspan; i++) {
        let col = colspan
        let temp = nextNode
        while (col--) {

          temp.classList.remove('hide')
          temp = temp.nextElementSibling
        }
        nextNode = getRowXElement(nextNode, 1)

      }
      node.removeAttribute('colspan')
      node.removeAttribute('rowspan')

    })
    //  合并命令
    mergeDiv.addEventListener('click', () => {
      if (select.value.length === 0) return
      //  默认是正向选中，即结尾点比开始点的x和y都大
      select.value.forEach((item, i) => {
        item.forEach((v, k) => {
          if (i === 0 && k === 0) {
            v.setAttribute('colspan', item.length || '1')
            v.setAttribute('rowspan', select.value.length || '1')
          } else {
            v.classList.add('hide')
          }
        })
      })
      clearSelect()
    })
    //  右键
    table.addEventListener('click', (e) => {
      e.target.focus()
    })
    table.addEventListener("contextmenu", (e) => {
      e.preventDefault()
      showBox.style.left = e.clientX + 'px'
      showBox.style.top = e.clientY + 'px'
      if (!select.value[0][0]) {
        select.value[0][0] = e.target
      }
    })
    table.addEventListener('blur', (e) => {
      setTimeout(() => {
        showBox.style.left = -1000 + 'px'
        showBox.style.top = -1000 + 'px'
      }, 150)
    })
    /**
     *  选中逻辑
     * 
     **/

    selectLogic(table, select)
    function selectLogic(table, select) {
      let lastEnd = [0, 0] // 最后选中的单元格位置
      let lastInfo = [0, 0]  //  最后选中单元格的宽高
      let endUp = [0, 0]
      let startRange = [0.0]
      let endRange = [0, 0]
      let run = false
      //  按下
      let timer = 0
      table.addEventListener('mousedown', (e) => {
        if (timer !== 0) {
          clearTimeout(timer)
          timer = 0
        }
        timer = setTimeout(() => {
          //  先清空
          clearSelect()
          run = true
          startRange = [e.clientX - e.offsetX, e.clientY - e.offsetY]
          lastEnd = [startRange[0], startRange[1]]
          lastInfo = [e.target.offsetWidth, e.target.offsetHeight]
          e.target.classList.add('select')
          if (e.target.tagName === 'TD') {
            select.value[0].push(e.target)
            select.range[0] = startRange
            select.range[1] = [startRange[0] + e.target.offsetWidth, startRange[1] + e.target.offsetHeight]
          }
        }, 200)

      })
      //  移动
      table.addEventListener('mousemove', (e) => {
        if (run) {
          end = [e.clientX, e.clientY]


          //  计算范围 然后 判断是否修改选中dom数组
          let x = end[0] - lastEnd[0]
          let y = end[1] - lastEnd[1]
          let xDirection = end[0] - startRange[0] > 0 ? 1 : -1  //  x方向
          let yDirection = end[1] - startRange[1] > 0 ? 1 : -1  //  y方向
          console.log(`x: ${x} y: ${y}  方向x：${xDirection}  方向y:${yDirection}`);

          if ((xDirection === 1 && x >= lastInfo[0]) || (xDirection === -1 && x <= 0)) {
            console.log('横向超出，x扩展');
            //  更新选取范围 x

            if (xDirection === 1) {
              lastEnd = [select.range[1][0], lastEnd[1]]
              lastInfo = [e.target.offsetWidth, lastInfo[1]]
              select.range[1] = [select.range[1][0] + e.target.offsetWidth, select.range[1][1]]

            } else {
              select.range[0] = [select.range[0][0] - e.target.offsetWidth, select.range[0][1]]

              lastEnd = [select.range[0][0], lastEnd[1]]
              lastInfo = [e.target.offsetWidth, lastInfo[1]]
            }
            //  每行横向添加一行
            for (let i = 0; i < select.value.length; i++) {
              //  查找最后一个节点元相邻td元素
              console.log(select.value[i]);
              if (xDirection === 1) {
                let el = getElement(select.value[i][select.value[i].length - 1], xDirection)

                select.value[i].push(el)

              } else {
                let el = getElement(select.value[i][0], xDirection)

                select.value[i].unshift(el)

              }

            }


          } else if ((xDirection === 1 && x <= 0) || (xDirection === -1 && x >= lastInfo[0])) {
            if (select.value[0].length <= 1) return
            console.log(select.value[0].length, '当前个数');

            if (xDirection === 1) {
              select.range[1] = [lastEnd[0], select.range[1][1]]
              lastEnd = [lastEnd[0] - e.target.offsetWidth, lastEnd[1]]
              lastInfo = [e.target.offsetWidth, lastInfo[1]]
            } else {
              select.range[0] = [lastEnd[0] + e.target.offsetWidth, select.range[0][1]]

              lastEnd = [select.range[0][0], lastEnd[1]]
              lastInfo = [e.target.offsetWidth, lastInfo[1]]


            }
            //  减去每行的最后一个
            for (let i = 0; i < select.value.length; i++) {
              if (select.value[i].length > 0) {
                if (xDirection === 1) {
                  select.value[i][select.value[i].length - 1].classList.remove('select')
                  select.value[i].pop()
                } else {
                  select.value[i][0].classList.remove('select')
                  select.value[i].shift()
                }
              }
            }
          }
          if ((yDirection === 1 && y > lastInfo[1]) || (yDirection === -1 && y <= 0)) {
            console.log('纵向超出,y扩展', select.value[0].length);
            if (yDirection === 1) {
              lastEnd = [lastEnd[0], select.range[1][1]]
              lastInfo = [lastInfo[0], e.target.offsetHeight]
              select.range[1] = [select.range[1][0], select.range[1][1] + e.target.offsetHeight]
            } else {
              select.range[0] = [select.range[0][0], select.range[0][1] - e.target.offsetHeight]
              lastEnd = [lastEnd[0], select.range[0][1]]
              lastInfo = [lastInfo[0], e.target.offsetHeight]
            }


            const lastRow = []
            for (let k = 0; k < select.value[0].length; k++) {
              let el = yDirection === 1 ? select.value[select.value.length - 1][k] : select.value[0][k]
              lastRow.push(getRowXElement(el, yDirection))


            }
            if (yDirection === 1) {
              select.value.push(lastRow)
            } else {
              select.value.unshift(lastRow)

            }

            //  更新选区范围
          } else if ((yDirection === 1 && y <= 0) || (yDirection === -1 && y >= lastInfo[1])) {
            if (select.value.length < 1) return
            if (yDirection === 1) {
              select.range[1] = [select.range[1][0], lastEnd[1]]

              lastEnd = [lastEnd[0], lastEnd[1] - e.target.offsetHeight]
              lastInfo = [lastInfo[0], e.target.offsetHeight]
            } else {
              select.range[0] = [select.range[0][0], lastEnd[1] + e.target.offsetHeight]

              lastEnd = [lastEnd[0], lastEnd[1] + e.target.offsetHeight]
              lastInfo = [lastInfo[0], e.target.offsetHeight]
            }

            //  去掉最后一行的class
            if (yDirection === 1) {
              select.value[select.value.length - 1].forEach(el => {
                el.classList.remove('select')
              })
              select.value.pop()
            } else {
              select.value[0].forEach(el => {
                el.classList.remove('select')
              })
              select.value.shift()
            }
          }
          //  选中元素添加class
          for (let i = 0; i < select.value.length; i++) {
            for (let k = 0; k < select.value[i].length; k++) {
              select.value[i][k] && select.value[i][k].classList.add('select')
            }
          }
        }
      })
      //  抬起
      table.addEventListener('mouseup', (e) => {
        run = false
        if (timer !== 0) {
          clearTimeout(timer)
          timer = 0
        }
        console.log(select.value);
      })
    }
    /*
      获取下一行当前横坐标相同位置元素
    */
    function getRowXElement(currentElement, direction = 1) {
      if (!currentElement.parentElement.nextElementSibling && direction == 1 || !currentElement.parentElement.previousElementSibling && direction !== 1) return null
      let nextElement = direction === 1 ? currentElement.parentElement.nextElementSibling.firstElementChild : currentElement.parentElement.previousElementSibling.firstElementChild;
      let childIndex = getChildIndex(currentElement)  //  获取当前元素在父元素中的索引
      if (childIndex !== -1) {
        return nextElement.parentElement.children[childIndex]
      } else {
        let currentLeft = currentElement.offsetLeft;
        let nextElementLeft = nextElement.offsetLeft;
        while (nextElement !== null && nextElementLeft !== currentLeft) {
          nextElement = getElement(nextElement, 1);
          nextElementLeft = nextElement.offsetLeft;
        }

        return nextElement;
      }

    }
    /**
     *  获取下一个兄弟元素
     * direction === 1时默认查找下一个兄弟元素，否则上一个
     **/
    function getElement(element, direction = 1) {
      if (direction === 1) {
        if (element.nextElementSibling) {
          return element.nextElementSibling;
        } else {
          let parent = element.parentElement;
          while (parent && parent.nextElementSibling === null) {
            parent = parent.parentElement;
          }
          return parent ? parent.nextElementSibling.firstElementChild : null;
        }
      } else {

        if (element.previousElementSibling) {
          return element.previousElementSibling;
        } else {
          let parent = element.parentElement;
          while (parent && parent.previousElementSibling === null) {
            parent = parent.parentElement;
          }
          return parent ? parent.previousElementSibling.firstElementChild : null;
        }
      }

    }
    function clearSelect() {
      select.value.forEach((item, index) => {
        item.forEach(v => {
          v.classList.remove('select')
        })
      })
      Object.assign(select, {
        value: [[]],
        range: [[], []] //  [start,end]范围
      })
    }
    /**
     * 获取子元素的索引
     */
    function getChildIndex(child) {
      var parent = child.parentNode;
      for (var i = 0; i < parent.children.length; i++) {
        if (parent.children[i] === child) {
          return i;
        }
      }
      return -1; // 如果找不到子元素，则返回-1
    }

  </script>
</body>

</html>

结语

合并没有做多次合并处理。
添加列没有实现。
边界情况未处理。

ZSK6
关注
  • 35
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【web前端基础day02】表格table+表单form
qq_61971608的博客
01-16 3900
HTML over
【前端开发之旅】简单实用HTML制作表格
akisi的博客
11-29 1357
实用HtML语言制作简单的表格。
web前端基础知识:表格
m0_62181310的博客
03-31 3819
一.表格 1.表格的基本标签 标签组成: table 表格整体 tr 行 td 单元格 嵌套关系:tabel>tr>td 2.表格的相关属性 border 边框粗细 width 宽度 height 高度 cellspacing 单元格与单元格之间的距离 cellpadding 单元格内容距离边框的距离 <table border="1" width="500".
【前端:HTML+CSS+JavaScript】HTML基础（下）
最新发布
加油，考上985的研究生
06-17 1256
标签用于定义描述列表（或定义列表），该标签与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd></dl><dl>
前端学习第五课（表格、表单、列表使用）
damadashen的博客
01-03 1809
表格、表单、列表使用
Vue前端的一些表格组件的思考
XiaoCai
08-28 1665
vue表格组件的一些汇总，包括自己实现复合表头。Vue easytable、Vue Good Table、Vue vxe-table和Tabulator的基本介绍
前端——10.表格标签
m0_52096593的博客
03-14 638
表格标签是实际开发中非常常用的标签。我们要熟练的使用它。表格的主要作用表格的基本语法。
HTML前端表格简单代码
weixin_73920238的博客
05-07 1052
HTML表格简单作业
JScript实现表格的简单操作
11-30
在本文中，我们将探讨如何使用JScript来实现对HTML表格的简单操作，包括添加、删除和修改行。JScript是JavaScript的一个变体，通常在Internet Explorer浏览器中使用，但在这里我们将其视为JavaScript来理解，因为...
JS实现简单表格排序操作示例
10-19
在本示例中，我们探讨了如何...在JavaScript中实现表格排序是前端开发中的一个基础功能，它帮助我们处理和展示数据。在了解了上述知识点后，开发者可以根据实际情况来设计和优化代码，实现更复杂的动态数据交互功能。
javascript实现表格增删改操作实例详解
10-24
本文将详细介绍如何利用JavaScript来实现表格的增加、删除和修改操作，并提供实际的代码示例，供有需要的朋友参考。 首先，创建一个基础的HTML结构，这个结构包括一个按钮用于添加数据，以及一个空的表格用于展示...
layui 表格操作列按钮动态显示的实现方法
10-16
本篇文章将详细介绍如何在layui表格中实现操作列按钮的动态显示。 1. **layui表格操作列的定义** layui表格允许开发者通过`<script type="text/html">`标签来定义操作列的模板。在这个模板中，我们可以使用`{{# }}...
jQuery实现表格的增、删、改操作示例
10-17
尤其是在处理表格数据时，能否高效便捷地实现这些操作直接关系到用户体验的好坏。使用jQuery库能够让我们在不刷新页面的情况下，通过简单的JavaScript代码即可完成复杂的DOM操作。本文提供的示例将涉及如何使用...
Web前端-HTML（表格与表单）
apple_73204060的博客
12-14 1840
表格与表单
前端入门：HTML（表格）
yscy0801的博客
03-25 762
下午点击查看详情点击查看详情点击查看详情晚自习王昭君对抗路发育路星期一
web前端开发基础——在网页中使用表格
热门推荐
陈沫尘的博客
10-19 1万+
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、如何插入表格1.关于表格1.二、使用步骤1.引入库2.读入数据总结 前言 本篇主要解释了如何在web中建立表格设置表格的大小，单元格宽高、背景色以及表格内字体的大小 提示：以下是本篇文章正文内容，下面案例可供参考 一、如何插入表格 由于关于web网页制作的软件多种多样
前端-基础 表格标签 - 基本使用及表头单元格 详解
三毛与海子的博客
01-10 1199
表格的基本使用，表头单元格使用
Web 前端学习之 表格
程序员小白的博客
09-29 5002
这里写自定义目录标题1. 1. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box { /*设置宽度*/ width: 100px; /*设置高度*/ height: 100px; background-color: yel
html 表格表单
m4587的博客
07-15 1181
inputtype="checkbox"name="hobby"value="zq"/>足球篮球羽毛球。乒乓球。
前端实现表格
06-02
在前端实现表格可以使用 HTML 和 CSS 进行布局和样式设计，使用 JavaScript 动态地向表格中添加数据和操作表格。下面是一个简单的表格示例： ```html 姓名 年龄 性别 张三 <td>25 男 李四 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZSK6

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值