简单实现一个todoList（上移、下移、置顶、置底）

演示

html部分请添加图片描述

<!DOCTYPE html>
<html>
<head><title>表格示例</title>
</head>
<body><table border="1"><thead><tr><th>更新时间</th><th>操作</th></tr></thead><tbody id="tableBody"><!-- 这里是虚拟数据行，你可以根据需要添加更多 --><tr><td>2023-10-13 10:00 ---- PM</td><td><button onclick="moveUp(this)">上移</button><button onclick="moveDown(this)">下移</button><button onclick="moveToTop(this)">置顶</button><button onclick="moveToBottom(this)">置底</button><button onclick="removeRow(this)">删除</button></td></tr><tr><td>2023-10-13 02:30 ---- AM</td><td><button onclick="moveUp(this)">上移</button><button onclick="moveDown(this)">下移</button><button onclick="moveToTop(this)">置顶</button><button onclick="moveToBottom(this)">置底</button><button onclick="removeRow(this)">删除</button></td></tr></tbody></table><button onclick="addRow()">添加数据行</button><script>//添加行function addRow() {var tableBody = document.getElementById("tableBody");var newRow = document.createElement("tr");newRow.innerHTML = `<td>${getCurrentTime()+'----'+Math.round(Math.random()*100+1)}</td><td><button onclick="moveUp(this)">上移</button><button onclick="moveDown(this)">下移</button><button onclick="moveToTop(this)">置顶</button><button onclick="moveToBottom(this)">置底</button><button onclick="removeRow(this)">删除</button></td>`;tableBody.appendChild(newRow);}//移除行function removeRow(button) {var row = button.parentNode.parentNode;row.remove();}function getCurrentTime() {var now = new Date();var year = now.getFullYear();var month = (now.getMonth() + 1).toString().padStart(2, '0');var day = now.getDate().toString().padStart(2, '0');var hours = now.getHours().toString().padStart(2, '0');var minutes = now.getMinutes().toString().padStart(2, '0');var time = `${year}-${month}-${day} ${hours}:${minutes}`;return time;}</script>
</body>
</html>

上移

        function moveUp(button) {var row = button.parentNode.parentNode;if (row.previousElementSibling) {console.log("🚀 ~ file: tabel.html:67 ~ moveUp ~ row.previousElementSibling:", row.previousElementSibling)row.parentNode.insertBefore(row, row.previousElementSibling);}}

下移

        function moveDown(button) {var row = button.parentNode.parentNode;if (row.nextElementSibling) {console.log("🚀 ~ file: tabel.html:74 ~ moveDown ~ row.nextElementSibling:", row.nextElementSibling)row.parentNode.insertBefore(row.nextElementSibling, row);}}

置顶

        function moveToTop(button) {var row = button.parentNode.parentNode;var tableBody = row.parentNode;tableBody.insertBefore(row, tableBody.firstElementChild);}

置底

        function moveToBottom(button) {var row = button.parentNode.parentNode;var tableBody = row.parentNode;tableBody.appendChild(row);}

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

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

相关文章

thinkphp5.1 获取缓存cache(‘cache_name‘)特别慢，php 7.0 unserialize 特别慢

thinkphp5.1 获取缓存cache(‘cache_name‘)特别慢，php 7.0 unserialize 特别慢

thinkphp5.1 获取缓存cache(‘cache_name’)特别慢&#xff0c;php 7.0 unserialize 特别慢 场景&#xff1a; 项目中大量使用了缓存&#xff0c;本地运行非常快&#xff0c;二三百毫秒&#xff0c;部署到服务器后 一个表格请求就七八秒&#xff0c;最初猜想是数据库查询慢&am…
阅读更多...
KY258 日期累加

KY258 日期累加

KY258 日期累加 int main() {int n 0; //样例个数cin >> n;//for循环处理n个样例for (int i 0; i < n; i){int y, m, d, num;int days[12] { 31,28,31,30,31,30,31,31,30,31,30,31 };//输入年月日 要加的天数cin >> y >> m >> d >>…
阅读更多...
排序算法(stable_sort(), sort())

排序算法(stable_sort(), sort())

sort函数我相信大家都不陌生&#xff0c;今天介绍一个新的排序算法stable_sort stable_sort&#xff1a;稳定排序算法&#xff0c;维持相等元素的原有顺序。 stable_sort 假如我们定义一个字符串数组 vector<string> words; //fox jumps over quick red slow the turtl…
阅读更多...
完整教程：Java+Vue+Websocket实现OSS文件上传进度条功能

完整教程：Java+Vue+Websocket实现OSS文件上传进度条功能

引言 文件上传是Web应用开发中常见的需求之一&#xff0c;而实时显示文件上传的进度条可以提升用户体验。本教程将介绍如何使用Java后端和Vue前端实现文件上传进度条功能&#xff0c;借助阿里云的OSS服务进行文件上传。 技术栈 后端&#xff1a;Java、Spring Boot 、WebSock…
阅读更多...
【Java学习之道】GUI开发的基本概念

【Java学习之道】GUI开发的基本概念

引言 在这一章&#xff0c;我们将一起走进Java的图形用户界面&#xff08;GUI&#xff09;开发的世界。在你阅读完这篇文章后&#xff0c;你将能够了解什么是GUI&#xff0c;以及如何使用Java进行GUI的开发。 一、什么是GUI 首先&#xff0c;让我们来解答一个许多初学者都会…
阅读更多...
AN基础工具——变形工具

AN基础工具——变形工具

【AN基础工具——变形工具】 基本使用方法&#xff1a;任意变形工具基础动画 本篇内容&#xff1a;学会使用变形工具 重点内容&#xff1a;变形工具 工 具&#xff1a;Adobe Animate 2022 基本使用方法&#xff1a; 任意变形工具 《任意变形工具&#xff08;快捷键Q&#xff0…
阅读更多...
深度学习系列51：hugging face加速库optimum

深度学习系列51：hugging face加速库optimum

1. 普通模型 Optimum是huggingface transformers库的一个扩展包&#xff0c;用来提升模型在指定硬件上的训练和推理性能。Optimum支持多种硬件&#xff0c;不同硬件下的安卓方式如下&#xff1a; 如果是国内安装的话&#xff0c;记得加上-i https://pypi.tuna.tsinghua.edu.c…
阅读更多...
八大排序算法(含时间复杂度、空间复杂度、算法稳定性)

八大排序算法(含时间复杂度、空间复杂度、算法稳定性)

文章目录 八大排序算法(含时间复杂度、空间复杂度、算法稳定性)1、&#xff08;直接&#xff09;插入排序1.1、算法思想1.2、排序过程图解1.3、排序代码 2、希尔排序3、冒泡排序3.1、算法思想3.2、排序过程图解3.3、排序代码 4、&#xff08;简单&#xff09;选择排序4.1、算法…
阅读更多...
Springcloud笔记（2）-Eureka服务注册中心

Springcloud笔记（2）-Eureka服务注册中心

Eureka服务注册 Eureka作为一个微服务的治理中心&#xff0c;它是一个服务应用&#xff0c;可以接收其他服务的注册&#xff0c;也可以发现和治理服务实例。 服务治理中心是微服务&#xff08;分布式&#xff09;架构中最基础和最核心的功能组件&#xff0c;它主要对各个服务…
阅读更多...
kafka生产者发送消息报错 Bootstrap broker localhost:9092 (id: -1 rack: null) disconnected

kafka生产者发送消息报错 Bootstrap broker localhost:9092 (id: -1 rack: null) disconnected

报这个错误是因为kafka里的配置要修改下 在config目录下 server.properties配置文件 这下发送消息就不会一直等待&#xff0c;就可以发送成功了
阅读更多...
CTFHub SSRF 题目

CTFHub SSRF 题目

文章目录 CTFHub SSRF 通关教程1. 内网访问&#xff0c;伪协议利用1.1 内网访问1.2 伪协议读取文件1.3 端口扫描 2. POST请求&#xff0c;上传文件&#xff0c;FastCGI协议&#xff0c;Redis协议2.1 POST请求2.2 上传文件2.3 FastCGI协议2.4 Redis协议 3. Bypass系列3.1 URL By…
阅读更多...
Macos数字音乐库：Elsten Software Bliss for Mac

Macos数字音乐库：Elsten Software Bliss for Mac

Elsten Software Bliss for Mac是一款优秀的音乐管理软件&#xff0c;它可以帮助用户自动化整理和标记数字音乐库&#xff0c;同时可以自动识别音乐信息并添加标签和元数据。 此外&#xff0c;Bliss还可以修复音乐库中的问题&#xff0c;例如重复的音乐文件和缺失的专辑封面等…
阅读更多...
达梦数据库模式、表、视图的相关查询

达梦数据库模式、表、视图的相关查询

所有模式的查询 /*USERNAME 代表的就是用户名字,NAME就是模式名*/ SELECT USERNAME FROM DBA_USERS; SELECT NAME FROM SYSOBJECTS WHERE TYPE$SCH; 所有表的查询 /*OWNER代表的就是模式名字,TABLE_NAME就是表名*/ SELECT OWNER,TABLE_NAME FOM ALL_TABLES; 查看某个模式下…
阅读更多...
Apache Dubbo 首个 Node.js 3.0-alpha 版本正式发布

Apache Dubbo 首个 Node.js 3.0-alpha 版本正式发布

作者&#xff1a;蔡建怿 关于Apache Dubbo3 Apache Dubbo 是一款易用、高性能的 WEB 和 RPC 框架&#xff0c;同时为构建企业级微服务提供服务发现、流量治理、可观测、认证鉴权等能力、工具与最佳实践。经过近几年发展&#xff0c;Dubbo3 已在阿里巴巴集团各条业务线实现全面…
阅读更多...
关于如何进行ChatGPT模型微调的新手指南

关于如何进行ChatGPT模型微调的新手指南

微调是指在预训练的模型基础上&#xff0c;通过进一步的训练来调整模型以适应特定任务或领域。预训练的模型在大规模的文本数据上进行了广泛的学习&#xff0c;从中获得了一定的知识和语言理解能力。然而&#xff0c;由于预训练并不针对具体任务&#xff0c;因此需要微调来使模…
阅读更多...
深耕全面预算管理 拥抱企业数字未来

深耕全面预算管理 拥抱企业数字未来

随着世界数字未来的不断发展&#xff0c;我国也正经历着一场更大范围、更深层次的科技变革。企业面对构建内部生态平衡体系的艰巨任务&#xff0c;对于其信息化部署也提出了更高的要求。增强预算编制的全面性&#xff0c;启动预算管理一体化改革成为了我国企业提高数字化水平的…
阅读更多...
练习题之C++

练习题之C++

文章目录 1.inline函数2.this指针3.初始化顺序 1.inline函数 可以在同一个项目的不同源文件内定义函数名相同但实现不同的inline函数 inline函数会在调用的地方展开&#xff0c;所以符号表中不会有inline函数的符号名&#xff0c;不存在链接冲突。 2.this指针 A.静态成员函数没…
阅读更多...
实验3：左右循环LED灯

实验3：左右循环LED灯

获取流水灯工程&#xff1a; 方式一&#xff1a; keilproteus 完成最小系统&#xff0c;点亮led 灯实验_吴小凹的博客-CSDN博客 方式二&#xff1a; Flowing_led.zip - 蓝奏云直接下载。 原理图修改&#xff1a; 无须修改只需要使用流水灯的工程即可&#xff0c;解压到桌面…
阅读更多...
SQL sever中的索引

SQL sever中的索引

目录 一、索引定义 二、索引结构 2.1. B-树索引结构&#xff1a; 2.2. 哈希索引结构&#xff1a; 三、索引作用 四、索引与约束区别 五、索引级别 六、索引分类 6.1. 聚集索引&#xff08;Clustered Index&#xff09;&#xff1a; 6.2. 非聚集索引&#xff08;Noncl…
阅读更多...
Python —— UI自动化之 三大等待与三大切换

Python —— UI自动化之 三大等待与三大切换

1、三大等待 1、硬性等待 1、概述 硬性等待也可以称之为强制等待&#xff0c;写法如下&#xff1a; time.sleep() 优点&#xff1a;使用简单 缺点&#xff1a;等待时间把握不准&#xff0c;容易造成时间浪费或者等待时间不足 2、实战 from time import sleep from sele…
阅读更多...
最新文章

Copyright @ 2022~2023