当前位置： 首页 > news >正文

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

news 2025/11/6 12:17:49

演示

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);}

相关文章：

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

演示 html部分 <!DOCTYPE html> <html> <head><title>表格示例</title> </head> <body><table border"1"><thead><tr><th>更新时间</th><th>操作</th></tr></thead…...

编程日记 2023/10/15 11:01:54

计算机视觉：池化层的作用是什么？

本文重点 在深度学习中，卷积神经网络（CNN）是一种非常强大的模型，广泛应用于图像识别、目标检测、自然语言处理等领域。而池化层作为CNN中的一个关键步骤，扮演着优化神经网络、提升深度学习性能的重要角色。本文将深入探讨池化层的作用及其重要性，帮助读者更好地理解和应…...

编程日记 2023/10/15 11:00:53

luffy项目前端创建、配置、解决跨域问题、后端数据库迁移

前端 创建前端vue 使用vue-cil创建前端将无用的东西删除 ​配置 跟后端交互&#xff1a;axios 安装插件&#xff1a;cnpm install -S axios在main.js中写import axios from "axios"; Vue.prototype.$axios axios后续使用就直接this.$axios即可 操作cookie&am…...

编程日记 2023/10/15 10:59:53

电商数据API接口：新服务下电商网站、跨境电商独立站,移动APP的新型拉新武器

互联网的发展改变了我们的生活方式&#xff0c;也改变了企业商家们的营销方式&#xff0c;越来越多的企业商家把产品营销从线下转到线上&#xff0c;选择在线商城、移动APP、微信公众号等互联网工具进行营销活动。而随着营销模式的多元化和电子支付渠道的进一步发展&#xff0c…...

编程日记 2023/10/15 10:58:52

多线程并发篇---第十一篇

系列文章目录 文章目录 系列文章目录前言一、CAS的原理二、CAS有什么缺点吗？三、引用类型有哪些？有什么区别？前言 一、CAS的原理 CAS叫做CompareAndSwap，比较并交换，主要是通过处理器的指令来保证操作的原子性，它包含 三个操作数： 变量内存地址，V表示旧的预期值，A表示…...

编程日记 2023/10/15 10:57:51

JVM第六讲：JVM 基础 - Java 内存模型引入

JVM 基础 - Java 内存模型引入 很多人都无法区分Java内存模型和JVM内存结构&#xff0c;以及Java内存模型与物理内存之间的关系。本文是JVM第六讲&#xff0c;从堆栈角度引入JMM&#xff0c;然后介绍JMM和物理内存之间的关系, 为后面JMM详解, JVM 内存结构详解, Java 对象模型详…...

编程日记 2023/10/15 10:56:50

机房安全管理制度

#安全运维管理制度# 1、总则 1.1、目的 为进一步规范XXXXX单位机房安全管理工作&#xff0c;防止未经授权的访问&#xff0c;做好机房的防火、防盗等工作&#xff0c;确保XXXXX单位机房物理设施的安全&#xff0c;制定本制度。 1.2、范围 本制度适用于XXXXX单位机房的安全…...

编程日记 2023/10/15 10:54:45

【自然语言处理】— 隐马尔可夫模型详解、例解

【自然语言处理】— 隐马尔可夫模型 【自然语言处理】— 隐马尔可夫模型引例隐马尔可夫模型概念隐马尔可夫模型的关键隐马尔可夫模型的数学表示隐含状态与观测结果状态转移矩阵观测概率矩阵初始状态概率向量 小结 【自然语言处理】— 隐马尔可夫模型 引例 假设有三种不同的骰…...

编程日记 2023/10/15 10:53:45

运行的 akrun 会打印信息到控制台，如何取消打印 -- chatGPT

gpt: 如果运行的程序 akrun 打印信息到控制台&#xff0c;但您希望取消或禁止它的输出&#xff0c;可以尝试以下方法&#xff1a; 1. **重定向输出到空文件**&#xff1a;您可以将程序的标准输出重定向到一个空文件&#xff0c;从而禁止信息输出到控制台。执行以下命令&#…...

编程日记 2023/10/15 10:51:42

【React】03-React面向组件编程2

文章目录 2.6. 组件的生命周期2.6.1. 效果2.6.2. 理解2.6.3. 生命周期流程图(旧)2.6.4. 生命周期流程图(新)2.6.5. 重要的勾子2.6.6. 即将废弃的勾子2.6.7 getSnapshotBeforeUpdate 2.7. 虚拟DOM与DOM Diffing算法2.7.1. 效果2.7.2. 基本原理图 2.6. 组件的生命周期 2.6.1. 效…...

编程日记 2023/10/15 10:50:41

【python编程】python无法import模块的一种原因分析

python系统路径添加错误 报错原因原因分析解决办法补充 最近写代码的时候遇到一个问题&#xff0c;就是想添加工程下fu_convert文件夹下自己编写的convert_fw.py模块&#xff0c;但是出现报错&#xff0c;是个比较低级的问题&#xff0c;但还是简单记录一下 报错原因 无法找到…...

编程日记 2023/10/15 10:47:38

vue3.0与vue2.0的区别

前言 Vue 3.0是一个用于构建用户界面的JavaScript框架。相比于Vue 2.x&#xff0c;Vue 3.0在性能、体积和开发体验上都有了很大的提升。 以下将从不同的角度上去分析Vue 3.0与Vue 2.0的区别&#xff1a; 一、项目架构 从项目搭建和打包工具的选择来看&#xff1a; Vue 2.0 中…...

编程日记 2023/10/15 10:46:38

09_Webpack打包工具

1 初识Webpack 1.1 什么是Webpack Webpack打包工具对项目中的复杂文件进行打包处理&#xff0c;可以实现项目的自动化构建&#xff0c;并且给前端开发人员带来了极大的便利。 目前&#xff0c;企业中的绝大多数前端项目是基于Webpack打包工具来进行开发的。 1.2 Webpack的安…...

编程日记 2023/10/15 10:45:37

小程序 | 小程序后端用什么语言开发比较好

目录 ♣️ 引言 选择合适的后端语言 推荐使用Node.js Node.js 的优点 其他备选语言 ♣️ 小结 ♣️ 引言 小程序的兴起已经成为了当今移动互联网时代的热点之一&#xff0c;而小程序后端的好坏直接影响着小程序的使用体验&#xff0c;因此&#xff0c;选择一种好的语言来…...

编程日记 2023/10/15 10:44:36

Websocket升级版

之前写过一个关于websocket的博客&#xff0c;是看书时候做的一个demo。但是纸上得来终觉浅&#xff0c;这次实战后实打实的踩了不少坑&#xff0c;写个博客记录总结。 1.安装postman websocket接口调试&#xff0c;需要8.5以及以上版本的postman 先把以前的卸载&#xff0c…...

编程日记 2023/10/15 10:43:35

基于音频SOC开发板的主动降噪ANC算法源码实现

基于音频SOC开发板的主动降噪ANC算法源码实现 是否需要申请加入数字音频系统研究开发交流答疑群(课题组)？可加我微信hezkz17, 本群提供音频技术答疑服务，+群附加赠送降噪开发资料,...

编程日记 2023/10/15 10:42:33

【Pytorch】深度学习之损失函数

文章目录 二分类交叉熵损失函数交叉熵损失函数L1损失函数MSE损失函数平滑L1(Smooth L1)损失函数目标泊松分布的负对数似然损失KL散度MarginRankingLoss多标签边界损失函数二分类损失函数多分类的折页损失三元组损失HingEmbeddingLoss余弦相似度CTC损失函数参考资料 学习目标&am…...

编程日记 2023/10/15 10:41:32

3.4 构造方法

思维导图&#xff1a; 3.4.1 定义构造方法 ### Java中的构造方法 #### **定义与目的** 构造方法&#xff0c;也称为构造器&#xff0c;是一个特殊的成员方法&#xff0c;用于在实例化对象时为对象赋值或执行初始化操作。其主要目的是确保对象在被创建时具有有效和合适的初始状…...

编程日记 2023/10/15 10:40:29

代码随想录

前言 代码随想录算法训练营day43 一、Leetcode 1049. 最后一块石头的重量 II 1.题目 有一堆石头&#xff0c;用整数数组 stones 表示。其中 stones[i] 表示第 i 块石头的重量。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分…...

编程日记 2023/10/15 10:39:28

2核4G游戏服务器推荐(阿里云/腾讯云/华为云)

2核4G游戏服务器推荐&#xff0c;首选腾讯云2核4G5M带宽轻量应用服务器218元一年、阿里云2核4G4M带宽轻量应用服务器297元一年&#xff0c;华为云2核2G3M云耀L服务器95元一年&#xff0c;阿腾云来详细说下2核4G游戏服务器推荐配置大全&#xff1a; 目录 2核4G游戏服务器推荐 …...

编程日记 2023/10/15 10:38:27

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2025/11/6 10:22:39

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/11/4 3:17:48

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/11/2 22:36:58

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/11/4 19:26:39

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/10/31 20:51:54

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2025/10/26 7:38:50

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/11/3 0:30:34

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/11/2 3:43:40