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

简言

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

功能实现

添加行

添加行分为在上面添加和在下面追加行。
利用 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].parentElementlet newNode = node.cloneNode(true)node.insertAdjacentElement('afterend', newNode)clearSelect()})//  向上添加一行addUpDiv.addEventListener('click', (e) => {let node = select.value[0][0].parentElementlet newNode = node.cloneNode(true)node.insertAdjacentElement('beforebegin', newNode)clearSelect()})//  删除当前行deleteCellDiv.addEventListener('click', () => {let node = select.value[0][0].parentElementnode.remove()clearSelect()})//  取消合并cancelDiv.addEventListener('click', () => {let node = select.value[0][0]let rowspan = node.getAttribute('rowspan')let colspan = node.getAttribute('colspan')if (!colspan || !rowspan) returncolspan = Number.parseInt(colspan)rowspan = Number.parseInt(rowspan)let index = getChildIndex(node)let nextNode = nodefor (let i = 0; i < rowspan; i++) {let col = colspanlet temp = nextNodewhile (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 = 0table.addEventListener('mousedown', (e) => {if (timer !== 0) {clearTimeout(timer)timer = 0}timer = setTimeout(() => {//  先清空clearSelect()run = truestartRange = [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] = startRangeselect.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扩展');//  更新选取范围 xif (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) returnconsole.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) returnif (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]}//  去掉最后一行的classif (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()}}//  选中元素添加classfor (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 = falseif (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 nulllet 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>

结语

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/7628.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

安卓通信方式简介

安卓通信方式简介

目录 一、Binder二、Socket三、Binder与Socket四、Handler 一、Binder Binder作为Android系统提供的一种IPC机制&#xff0c;无论从系统开发还是应用开发&#xff0c;都是Android系统中最重要的组成。 二、Socket Socket通信方式也是C/S架构&#xff0c;比Binder简单很多。在…
阅读更多...
Llama3-Tutorial之Llama3 Agent能力体验+微调（Lagent版）

Llama3-Tutorial之Llama3 Agent能力体验+微调（Lagent版）

Llama3-Tutorial之Llama3 Agent能力体验微调&#xff08;Lagent版&#xff09; 参考&#xff1a; https://github.com/SmartFlowAI/Llama3-Tutorial 1. 微调过程 使用XTuner在Agent-FLAN数据集上微调Llama3-8B-Instruct&#xff0c;以让 Llama3-8B-Instruct 模型获得智能体能力…
阅读更多...
期权怎么开户？

期权怎么开户？

今天期权懂带你了解期权怎么开户&#xff1f;近年来&#xff0c;随着股市的持续低迷&#xff0c;市场交易痛点越发明显的氛围中&#xff0c;所以有人看到了双向交易的期权。 期权怎么开户&#xff1f; 1、首先是证券账户内的资金需要满足50万保留20个交易日&#xff1b; 2、其…
阅读更多...
elementUI table表格相同元素合并行----支持多列

elementUI table表格相同元素合并行----支持多列

效果图如下: vue2代码如下&#xff1a; 只粘贴了js方法哦&#xff0c; methods: {// 设置合并行 setrowspans() { const columns [‘name’, ‘value’]; // 需要合并的列名 // 为每个需要合并的列设置默认 rowspan this.tableData.forEach(row > { columns.forEach(col …
阅读更多...
Google Play开发者账号为什么会被封？如何解决关联账号问题？

Google Play开发者账号为什么会被封？如何解决关联账号问题？

Google Play是Google提供的一个应用商店&#xff0c;用户可以在其中下载并安装Android设备上的应用程序、电影、音乐、电子图书等。Google Play是Android平台上较大的应用市场&#xff0c;包含了数百万个应用程序和游戏。但是谷歌对于上架应用的审核越趋严格&#xff0c;开发者…
阅读更多...
解决RTC内核驱动的问题bm8563

解决RTC内核驱动的问题bm8563

常用pcf-8563 , 国产平替BM8563(驱动管脚一致)&#xff1b; 实时时钟是很常用的一个外设&#xff0c;通过实时时钟我们就可以知道年、月、日和时间等信息。 因此在需要记录时间的场合就需要实时时钟&#xff0c;可以使用专用的实时时钟芯片来完成此功能 RTC 设备驱动是一个标准…
阅读更多...
CSS学习笔记之基础教程（二）

CSS学习笔记之基础教程（二）

上节内容CSS学习笔记之基础教程&#xff08;一&#xff09; 6、边距 6.1 外边距&#xff1a;margin 6.1.1 外边距 marginmargin-topmargin-leftmargin-bottommargin-right <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8…
阅读更多...
Linux网络—PXE高效批量网络装机

Linux网络—PXE高效批量网络装机

目录 一、部署PXE远程安装服务 1、搭建PXE远程安装服务器 1&#xff09;安装并启用 TFTP 服务 2&#xff09;安装并启用 DHCP 服务 3&#xff09;准备 Linux 内核、初始化镜像文件 4&#xff09;准备 PXE 引导程序 5&#xff09;安装FTP服务&#xff0c;准备CentOS 7 安…
阅读更多...
从简单逻辑到复杂计算：感知机的进化与其在现代深度学习和人工智能中的应用（下）

从简单逻辑到复杂计算：感知机的进化与其在现代深度学习和人工智能中的应用（下）

文章目录 第一章&#xff1a;感知机的局限性1.1 异或门的挑战1.2 线性与非线性问题 第二章&#xff1a;多层感知机2.1 已有门电路的组合2.2 实现异或门 第三章&#xff1a;从与非门到计算机 文章文上下两节 从简单逻辑到复杂计算&#xff1a;感知机的进化与其在现代深度学习和人…
阅读更多...
unity基础(一)

unity基础(一)

内容概要&#xff1a; 生命周期函数vector3 位置 方向 缩放旋转等信息Vector3欧拉角和Quaternion四元素unity脚本执行顺序设置 一 生命周期函数 方法说明Awake最早调用,所以一般可以再此实现单例模式OnEnable组件激活后调用,在Awake后会调用一次Start在Update之前调用一次&a…
阅读更多...
软件架构的艺术：探索演化之路上的18大黄金原则

软件架构的艺术：探索演化之路上的18大黄金原则

实际工作表明&#xff0c;一步到位的设计往往不切实际&#xff0c;而演化原则指导我们逐步优化架构&#xff0c;以灵活响应业务和技术的变化。这不仅降低了技术债务和重构风险&#xff0c;还确保了软件的稳定性和可扩展性。同时&#xff0c;架构的持续演进促进了团队协作&#…
阅读更多...
java：递归实现的案例

java：递归实现的案例

//求第20个月兔子的对数 //每个月兔子对数&#xff1a;1&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;5&#xff0c;8 public class Test {//求第20个月兔子的对数//每个月兔子对数&#xff1a;1&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;5&#xff0c;8pu…
阅读更多...
Linux进程——Linux进程与进程优先级

Linux进程——Linux进程与进程优先级

前言&#xff1a;在上一篇了解完一部分常见的进程状态后&#xff0c;我们先来把剩下的进程状态了解一下&#xff0c;再来进入进程优先级的学习&#xff01; 如果对前面Linux进程不太熟悉可以先阅读&#xff1a; Linux进程 本篇主要内容&#xff1a; 僵尸进程和孤儿进程 Linux进…
阅读更多...
LLM——用于微调预训练大型语言模型（LLM）的GPU内存优化与微调

LLM——用于微调预训练大型语言模型（LLM）的GPU内存优化与微调

前言 GPT-4、Bloom 和 LLaMA 等大型语言模型&#xff08;LLM&#xff09;通过扩展至数十亿参数&#xff0c;实现了卓越的性能。然而&#xff0c;这些模型因其庞大的内存需求&#xff0c;在部署进行推理或微调时面临挑战。这里将探讨关于内存的优化技术&#xff0c;旨在估计并优…
阅读更多...
LTE的EARFCN和band之间的对应关系

LTE的EARFCN和band之间的对应关系

一、通过EARFCN查询对应band 工作中经常遇到只知道EARFCN而需要计算band的情况&#xff0c;因此查了相关协议&#xff0c;找到了他们之间的对应关系&#xff0c;可以直接查表&#xff0c;非常方便。 具体见&#xff1a; 3GPP TS 36.101 5.7.3 Carrier frequency and EAR…
阅读更多...
单细胞｜GeneTrajectory·基因轨迹

单细胞｜GeneTrajectory·基因轨迹

跑完了&#xff0c;记录一下&#xff0c;顺便写写我在使用中遇到的问题&#xff0c;欢迎讨论&#xff5e; 声明&#xff1a;我是用自己数据跑的&#xff0c;因为还未发表所以就还是借用官网的图啦&#xff5e; 1.准备 library(GeneTrajectory) library(Seurat) library(dply…
阅读更多...
OpenCV 入门（五） —— 人脸识别模型训练与 Windows 下的人脸识别

OpenCV 入门（五） —— 人脸识别模型训练与 Windows 下的人脸识别

OpenCV 入门系列&#xff1a; OpenCV 入门&#xff08;一&#xff09;—— OpenCV 基础 OpenCV 入门&#xff08;二&#xff09;—— 车牌定位 OpenCV 入门&#xff08;三&#xff09;—— 车牌筛选 OpenCV 入门&#xff08;四&#xff09;—— 车牌号识别 OpenCV 入门&#xf…
阅读更多...
【陀螺仪JY61P维特智能】通过单片机修改波特率和角度参考的方法

【陀螺仪JY61P维特智能】通过单片机修改波特率和角度参考的方法

根据官方文档&#xff1a; 修改波特率 1.解锁:FF AA 69 88 B5 1.1延时200ms 2.修改波特率:FF AA 04 06 00 2.1切换已修改的波特率然后重新发送解锁和保存指令 2.2解锁:FF AA 69 88 B5 2.3延时200ms 4.保存: FF AA 00 00 00 XY轴角度参考 角度参考是以传感器当前的实际位置&…
阅读更多...
【系统分析师】系统分析部分

【系统分析师】系统分析部分

文章目录 1、系统分析概述2、详细调查2.1 为什么要做详细调查&#xff1f;2.2 详细调查的原则2.3 详细调查的内容2.4 详细调查的方法 3、现有系统分析3.1 获得系统的物理模型3.2 抽象出现有系统的逻辑模型3.3 建立新系统的逻辑模型3.4 建立新系统的物理模型 4、组织结构分析4.1…
阅读更多...
记录汇川：电磁阀封装

记录汇川：电磁阀封装

二位电磁阀封装&#xff1a; 中封三位电磁阀封装&#xff1a; HMI&#xff1a;
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023