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

简言

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

功能实现

添加行

添加行分为在上面添加和在下面追加行。
利用 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，一经查实，立即删除！

相关文章

MySQL学习笔记9——触发器和权限管理

MySQL学习笔记9——触发器和权限管理

触发器和权限管理 一、触发器1、如何操作触发器2、触发器的优缺点 二、权限管理1、角色的作用2、角色的操作3、用户的操作 一、触发器 当商品信息和库存信息分别存放在两个不同的数据表中时&#xff0c;可以创建一个触发器&#xff0c; 让商品信息数据的插入操作自动触发库存数…
阅读更多...
游戏中常用的设计模式及场景

游戏中常用的设计模式及场景

常用的游戏设计模式及其场景有&#xff1a; 状态模式&#xff08;State Pattern&#xff09;&#xff1a;该模式定义了一系列状态和状态之间的转移关系&#xff0c;可以用于控制游戏中各个元素的行为。例如&#xff0c;在一款格斗游戏中&#xff0c;玩家的角色可以处于站立、跑…
阅读更多...
安卓通信方式简介

安卓通信方式简介

目录 一、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 …
阅读更多...
L2网络和L3网络（L2VPN和L3VPN）

L2网络和L3网络（L2VPN和L3VPN）

L2网络和L3网络是计算机网络体系结构中按照OSI模型或TCP/IP模型的层次来区分的两种不同类型的网络。 L2网络&#xff08;数据链路层网络&#xff09; L2网络指的是第二层网络&#xff0c;对应于OSI模型中的数据链路层。这一层的主要职责是处理数据帧&#xff08;frames&#…
阅读更多...
Google Play开发者账号为什么会被封？如何解决关联账号问题？

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

Google Play是Google提供的一个应用商店&#xff0c;用户可以在其中下载并安装Android设备上的应用程序、电影、音乐、电子图书等。Google Play是Android平台上较大的应用市场&#xff0c;包含了数百万个应用程序和游戏。但是谷歌对于上架应用的审核越趋严格&#xff0c;开发者…
阅读更多...
【AIGC调研系列】VILA-1.5版本的视频理解功能如何

【AIGC调研系列】VILA-1.5版本的视频理解功能如何

VILA-1.5版本的视频理解功能表现出色&#xff0c;具有显著的突破。这一版本不仅增强了视频理解能力&#xff0c;还提供了四种不同规模的模型供用户选择&#xff0c;以适应不同的应用需求和计算资源限制[1][2][3]。此外&#xff0c;VILA-1.5支持在笔记本等边缘设备上部署&#x…
阅读更多...
解决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 安…
阅读更多...
智慧公厕，让您告别节假日的排队烦恼！

智慧公厕，让您告别节假日的排队烦恼！

尊敬的读者朋友们&#xff0c;您是否曾在美丽的景区中&#xff0c;因为公共厕所排队问题而感到焦虑&#xff1f;五一假期&#xff0c;一个小小的排队可能会影响您的出游心情。但是&#xff0c;别担心&#xff0c;现在有了智慧公厕&#xff0c;这个问题终于可以轻松解决了&#…
阅读更多...
李秘书讲写作：不准确用语可能成为谣言传播主因

李秘书讲写作：不准确用语可能成为谣言传播主因

李秘书讲写作&#xff1a;不准确用语可能成为谣言传播主因 李秘书发现&#xff0c;一些报刊、电台和媒体上关于新闻资讯类报道中&#xff0c;有些不准确用词、用语愈演愈烈。看起来不是什么大事&#xff0c;但细究起来问题不小&#xff0c;而且可能是诱发以谣传谣、以讹传讹的…
阅读更多...
从简单逻辑到复杂计算：感知机的进化与其在现代深度学习和人工智能中的应用（下）

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

文章目录 第一章&#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;旨在估计并优…
阅读更多...
最新文章

Copyright @ 2022~2023