js实现动态删除表格的行或者列-------Day57

2023-05-16

昨天记录了动态添加表格的一行,当然这个一行是指一行数据,也就是说一行多少列也是加上的,并且第几列的内容都可以添加上,先来回顾下它的实现的关键点:

1、var row=table.insertRow();添加一行;

2、var cell1=row.insertCell();添加一个单元格;(如果在后面继续写var cell2=row.insertCell()的话,就是添加第二列;)

3、cell1.innerHTML="第一列的内容";向第一个单元格中填充值



以上就是昨天记录的动态添加一行的全部了,当然能够添加就能删除,而今天来记录的就是动态的删除,删除一行,删除一列。首先看删除一行:

我们先来看存在的表格:


这样,现在存在一个四行两列的表格,我们先来实现删除某指定一行:假定我们需要删除第三行,我们该怎么写呢?

这样来看一下代码:在html代码中,在delRow按钮上添加方法οnclick="c()";

function c(){
	var table=document.getElementById("tad");
	var len=table.rows.length;
	table.deleteRow(len-2);//这里删除的是倒数第二行,也就是第三行
}
这样我们来运行下,结果显示为:

这样,第三行就被删除了,由此我们可以得知,删除一行的方法为deleteRow(index),index为参数,表示第几行,这个参数时从上向下,由0开始数的,另外有特别需要注意的一点:如果参数不写,则效果与参数为0一样,表示删除最上面一行

这样实现删除所有行是不是就有思路了,这样我们来写下代码:

function c(){
	var table=document.getElementById("tad");
	var len=table.rows.length;
	for(var i=0;i<len;i++){
	    table.deleteRow();//也可以写成table.deleteRow(0);
	}
}
这样我们来看下结果:


就只剩下table的外壳了,里面的内容全都不见了,原理我们懂了,代码我们也实现了,但是在实现过程中有几点我们需要注意:

1、在循环中我们是首先获取的固定值,var len=table.rows.length;然后i<len,而不是直接写i<table.rows.length;

想必大家都明白其中的原因,删除一行之后,在进入第二次循环的时候,表格已经变动了,则table.rows.length也改变了,然而i也增大了,等到table.row.length<=i的时候行并没有全部删光,在这个例子中的话应该是i=2的时候table.rows.length也等于2了,则就不再进行删除了,所以会余下两行,解决的办法之一,当然就是按我写这样,另一种也可以把i++去掉,知道len=0的时候停止也可以,但是理解起来有点麻烦了就

2、在循环中我们写的是table.deleteRow()或者table.deleteRow(0),而不是table.deleteRow(i),跟1中的原因一样的哦



接下来我们再来记录下删除列,如果说行是deleteRow()的话,列该怎么写呢,这里没有cols的事情,事实上就是之前添加的单元格啊,将每一行的同一列上的单元格全部删除掉不就等同于删除了一列么,删除单元格的方法同样跟添加是对应的deleteCell();

这样如果说只删除固定列,怎么写也就呼之欲出了吧,继续就上面的表格进行操作,删除第三行第二列,我们来写下实现代码:

function d(){
	var table=document.getElementById("tad");
	table.rows[2].deleteCell(1);
}

这个结果太明显了吧,那样所有列都删除也就容易多了,来继续实现下代码:

function d(){
	var table=document.getElementById("tad");
	for(var i=0;i<table.rows.length;i++){
		table.rows[i].deleteCell(1);
	}
}

这个结果也就随之而来了,这样我们就实现了动态的删除行和列,我们再来总结下:

1、删除行的方法:deleteRow();添加行则是insertRow();

2、删除列,即是删除单元格,方法为:deleteCell();而添加列则是insertCell()



最近工作碰到了个小问题,uml时序图一直没法彻底理解了呢,看起来挺简单的,可就绕不出那个弯了,加油啊...






本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js实现动态删除表格的行或者列-------Day57 的相关文章

  • linux no crontab for root - using an empty one Permission denied

    今天在linux服务器建个定时任务 xff1a crontab e 的时候 xff0c 一直遇到以下报错 xff0c 真是搞得懵逼 linux no crontab for root using an empty one crontab i
  • 11- OpenCV进行目标追踪 (OpenCV系列) (机器视觉)

    知识要点 1 OpenCV目标跟踪算法 的使用大概可以分为以下几个步骤 创建MultiTracker对象 trackers 61 cv2 legacy MultiTracker create 读取视频 或摄像头数据 cap 61 cv2 V
  • Django密码的哈希算法储存

    我们知道密码是用户的隐私数据 xff0c 我们不能将真实的密码值储存在数据库中 xff0c 这样是及其不安全的 xff0c 因此我们可以用哈希算法来将一串明文密码转化为一串不可逆的值 xff0c 也就是说即使有人拿到了数据库中的密码 xff
  • 四轴飞行器——电调校准

    电调是驱动电机用的调速器 电调的作用 xff1a 电机的电流很大 xff0c 通常每个电机正常工作时的平均电流在3A左右 xff0c 如果没有电调的存在 xff0c 飞控板的I O口无法承受这样大的电流 电子调速器负责使电机运行在飞控 xf
  • 异常检测之集成方法

    感谢datawhale大部队 xff01 一 前言 背景 xff1a 在现实异常检测业务场景中 xff0c 数据集是多维度 xff08 通常是成百上千 xff09 的 xff0c 随着维度的增加 xff0c 数据空间的大小 xff08 体积
  • Spring AOP代码实现:实例演示与注解全解

    1 理解AOP 1 1 什么是AOP AOP xff08 Aspect Oriented Programming xff09 xff0c 面向切面思想 xff0c 是Spring的三大核心思想之一 xff08 两外两个 xff1a IOC
  • Windows下首次安装TensorFlow失败

    TensorFlow是一个基于数据流编程 xff08 dataflow programming xff09 的符号数学系统 xff0c 被广泛应用于各类机器学习 xff08 machine learning xff09 算法的编程实现 xf
  • Mybatis之使用注解开发CRUD

    上一篇演示了如何使用XML来操作Mybatis实现CRUD xff0c 但是大量的XML配置文件的编写是非常烦人的 因此 Mybatis也提供了基于注解的配置方式 xff0c 下面我们来演示一下使用接口加注解来实现CRUD的的例子 首先是创
  • 第16届智能车竞赛双车接力组—直立车经验语录

    第16届智能车竞赛双车接力组 直立车经验语录 前言直立环核心控制算法 串级PID转向环控制算法算法框架搭车方法波形拟合调车方法角速度环整定方法角度环整定方法速度环整定方法转向环整定方法其他问题 END 前言 这是我第一次参加智能车竞赛 xf
  • 时序异常检测方法总结

    异常检测 xff08 Anomaly detection xff09 是时序数据分析最成熟的应用之一 xff0c 目的是从正常的时间序列中识别不正常的事件或行为的过程 异常类型 xff1a 点异常 xff0c 上下文异常 xff0c 集合异
  • 中科大 2019 大数据学院 计算机专业 复试经验分享(一)

    复试已经过去很长时间了 xff0c 从拟录取之后就在马不停蹄的找导师 xff0c 确认 xff0c 沟通暑假学习内容 xff0c 旅行 xff0c 报道等等 现在已经有时间可以好好总结一下复试踩过的坑 大数据学院复试场景复刻 xff1a 复
  • Robocup 仿真2D 学习笔记(二) 球队代码编译和上场

    环境的一些问题 最近在使用rcssserver 和 rcssmonitor时可能会遇到 configure失败的问题 xff0c 可以检查一下文件夹是否有makefile文件 xff0c 如果是编译后的包直接sudo make instal
  • Ubuntu16.04+RTX3090+python3+cuda11.1+ CUDNN  8.04+anaconda3+pytorch-nightly深度学习环境搭建实录

    硬件信息 cpu Intel R Core TM i7 10700 CPU 64 2 90GHz 显卡 GeForce RTX 3090 网卡 Ethernet Connection 17 I219 V 内存 62GiB System me
  • ubuntu16.04 python2.7 cuda10.0 安装pytorch1.1.0 torchvision0.3.0

    工欲善其事 xff0c 必先利其器 显卡驱动版本和cuda版本 xff1f 今天两台电脑训练时发现速度比平时慢了 xff0c 以为是网络的变大导致 但nvidia smi发现显存占用少 xff0c gpu速度占用1 xff0c 同时用gno
  • 强化学习: 参数化动作空间环境gym-platform(1)

    gym platform环境安装 前提 xff1a 已经安装里gym 主页 xff1a https github com cycraig gym platform 安装 xff1a git clone https github com cy
  • 三步使用Docker容器创建RoboCup仿真2D环境

    本文相关视频 xff1a 三步使用Docker容器创建RoboCup仿真2D环境 哔哩哔哩 bilibili RoboCup是机器人足球世界杯 xff0c 最早于1997年在日本名古屋举办 xff0c 有来自全世界38支球队参加仿真和机器人
  • Robocup 仿真2D 学习笔记(四)阵型编辑

    一 阵型文件介绍 阵型文件里设置的是球员在比赛中的跑位点 基于helios base的阵型文件 xff0c 在目录 src formations dt中 阵型的调用在 src strategy cpp 文件 xff1a before kic
  • 2019中科大计算机考研初试经验总结

    能够在2019年290万考研大军中幸存 xff0c 不仅有努力还有运气 中科大大数据学院计算机专业上岸后 xff0c 总结一些快一年考研路上的经验和弯路 xff0c 希望可以对学弟学妹有所帮助 基础情况 xff1a 毕业工作半年辞职考研 x
  • C语言a+++b的问题

    有时候有这道面试题 xff1b int a 61 5 b 61 7 c c 61 a 43 43 43 b 在VC 43 43 里面看一下 xff1b 输出 xff1b 首先 a 43 43 43 b 和a 43 43 43 b俩个表达式概
  • Robocup 仿真2D 学习笔记(一) ubuntu16.04 搭建 robocup 仿真2D环境

    前言 robocup2D 是一个仿真机器人足球比赛 xff0c 也是一个研究多智能体强化学习等机器学习理论算法的优秀平台 xff0c 在接下来的一段时间 xff0c 通过学习如何在robocup2D仿真比赛中运用机器学习算法 xff0c 提

随机推荐

  • Vue - v-for 中为什么不能用 index 作为 key

    目录 1 先来看一个例子 2 上述问题的解决方法 3 高效的 Diff 算法原理 4 不能用 index 作为 key 这是一篇脱坑日记 xff0c 在做项目的过程中 xff0c 我使用了 v for 渲染子组件时 xff0c 并将 ind
  • docker安装centos7镜像

    拉取centos7镜像 root 64 localhost docker pull centos 7 启动镜像centos7 xff0c 如果不指定 bin bash xff0c 容器运行后会自动停止 root 64 localhost d
  • Debian apt update 提示 由于没有公钥,无法验证下列签名...

    sudo apt update 忽略 1 http mirrors aliyun com debian stretch InRelease 命中 2 http mirrors aliyun com debian security stret
  • java this的用法

    用类名定义一个变量的时候 xff0c 定义的只是一个引用 xff0c 外面可以通过这个引用来访问这个类里面的属性和方法 public class ThisDemo String name 61 34 Mick 34 public void
  • CSDN 博客备份工具

    前言 核心 登录模块 备份模块 博文扫描模块 演示 如何使用 效果 总结 前言 近段时间以来 听群友博友都在谈论着一件事 CSDN博客怎么没有备份功能啊 这其实也在一定程度上表征着大家对于文章这种知识性产品的重视度越来越高 也对于数据的安全
  • 数据链路层传输故障分析

    数据链路层传输故障分析 依据链路层发送与接收的帧格式 xff0c 说明在数据链路层 网络层 传输层接收数据的过程中 xff0c 出现以下情况时 xff0c 可能出现的问题是什么 xff1f A xff09 利用网络助手可以在接收端接收到发送
  • 【Qt串口调试助手】1.2 - 串口数据接收不发生换行,CH340 / CP2102 多硬件兼容

    上一篇提到 xff1a 对串口接收的显示 xff0c 使用的是当前位置插入 43 移动鼠标光标到末尾的方式 这种方法可以有效解决 串口数据接收发生换行的问题 xff0c 并且解决 CH340 CP2102 多硬件显示结果不一致的问题 那有没
  • Altium AD20的四层板叠层管理、平面层20H内缩

    AD新建的PCB默认为双层板 xff0c 多层板需要自行添加叠层 下面以四层板为例进行说明 AD20的叠层管理 xff0c 叠层为四层板 工具 层叠管理器 xff08 快捷键 xff1a D K xff09 能够看出这是一个普通的双层板结构
  • 开源10轴IMU PCB,基于MEMS传感器MPU6500-HMC5983-AK8975-BMP280-MS5611设计,适用于多轴无人机、平衡车、惯导入门

    以MPU6500 HMC5983 AK8975 BMP280 MS5611为传感元件的10轴IMU PCB xff0c 集成MEMS加速度计 陀螺仪 地磁 气压计 有三种不同尺寸的PCB组合样式 xff0c Altium格式 xff0c 可
  • 操作系统任务执行和任务切换的基本实现原理

    任务的执行 软件或处理器可以使用以下方法之一来调度执行一个任务 xff1a 使用CALL指令明确地调用一个任务 xff1b 使用JMP指令明确地跳转到一个任务 Linux内核使用的方式 由处理器 隐含地调用一个中断句柄处理任务 xff1b
  • AD20 PCB导出Gerber、拼板,华秋DFM一键拼板,同理支持其他PCB EDA软件的Gerber导入与拼板

    Altium PCB的拼板着实头疼 xff0c 因没有自带的拼板功能 xff0c 每次都要手动重复同样的操作 xff0c 费时费力 xff0c 有没有种简单的方法呢 xff1f 这里推荐华秋DFM 华秋DFM是一款高效的PCB设计软件 xf
  • 安装win11电脑必须支持TPM2.0和必须支持安全启动的解决方法

    安装win11电脑必须支持TPM2 0和必须支持安全启动的解决方法 一 开启TPM设置二 开启安全启动设置三 更改硬盘模式 xff08 需硬盘支持 xff09 安装 Win11 的基本要求 xff0c 在win11最低要求是提示 xff0c
  • QCY T8无线蓝牙耳机连接电脑时无限断连解决办法

    参考 xff1a https www zhihu com question 434919223 answer 1652118128 知乎问题中十三大佬的回答亲测有效 xff0c 记录一下 在win10连t8时会出现一个音频类别的QCY T8
  • Linux 高并发服务器实战 - 5 项目实战

    Linux 高并发服务器实战 5 项目实战 1 阻塞 非阻塞 同步 异步 网络IO 典型的一次IO的两个阶段是什么 xff1f 数据就绪 和 数据读写 网络IO阶段1 在操作系统 TCP接收缓冲区 数据就绪 xff1a 根据系统IO操作的就
  • js实现打字机效果---Day06

    我常想象这样一幅画面 xff1a 素雅的大背景 xff0c 伴着可心的音乐 xff0c 优雅旋转着的芭蕾舞者 xff0c 旁边那不断打出的文字 xff0c 仿佛就这样娓娓道来他们那美美的故事 xff1b 也常想象 xff1a 呼喇啦甩动的大
  • 纯css3实现漂亮的对话框----Day07

    姑且先不来讨论css3跟css的区别 xff0c 也不说html和html5的不同 xff0c 虽然这很关键 xff0c 但是现阶段还真的没整利落了 xff0c 姑且就这些应用先用着 xff0c 等自己有些见解了再来探讨那些深层次的问题 先
  • 纯css3实现饼状图-------Day21

    现代网站在商务应用中比较广泛 xff0c 什么oa xff0c 什么erp xff0c 除了导入导出 xff0c 就是数据统计 xff0c 再不然就来个做个报表 xff0c 而饼状图作为数据的一种直观统计显示 xff0c 应用是非常广泛的
  • 你是如何理解var e=e||window.event的------Day26

    你是如何理解var e 61 e window event的 xff1f 相信很多人都能给我个回答说是 xff1a 为了实现多种浏览器兼容 不错 xff0c 确实是为了实现浏览器兼容 xff0c 但是它又是如何实现浏览器兼容的呢 xff1f
  • js实现回放拖拽轨迹-------Day48

    今天有点小高兴 xff0c csdn博客浏览量过万了 xff0c 在过去还从来没有过这么高的浏览量呢 xff0c 不得不说 xff0c 太多时候还是有些矫情 xff0c 可看到这些鼓励还是忍不住高兴啊 xff0c 至少 xff0c 这样让我
  • js实现动态删除表格的行或者列-------Day57

    昨天记录了动态添加表格的一行 xff0c 当然这个一行是指一行数据 xff0c 也就是说一行多少列也是加上的 xff0c 并且第几列的内容都可以添加上 xff0c 先来回顾下它的实现的关键点 xff1a 1 var row 61 table