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 的相关文章

  • 多生产者——多消费者问题

    问题背景 假设有四个人 xff1a 父亲 母亲 女儿 儿子 xff0c 和一个空盘子 xff0c 里面最多放一个水果 父亲每次向盘子中放一个苹果 xff0c 女儿只会吃苹果 母亲每次向盘子中放一个橘子 xff0c 儿子只会吃橘子 这个问题可
  • Android-MVVM-Databinding的原理、用法与封装

    前言 说起 DataBinding ViewBinding 的历史 xff0c 可谓是一波三折 xff0c 甚至是比 Dagger Hilt 还要传奇 说起依赖注入框架 Dagger2 Hilt xff0c 也是比较传奇 xff0c 刚出来
  • day03 Python基础

    day03 Python基础 版权声明 xff1a 本博客转载自路飞学城Python全栈开发培训课件 xff0c 仅用于学习之用 xff0c 严禁用于商业用途 xff0c 未经授权 xff0c 严禁转载 欢迎访问路飞学城官网 xff1a h
  • 最新Spire.pdf Spire.Doc Spire.Xls等无水印使用

    Aspose与Spire功能都很强大 xff0c 为什么要选择Spire xff0c Spire支持WPF组件 xff0c Aspose默认没有 新建 net6控制台程序 xff0c 用NuGet包添加Spire PDF引用 添加代码 us
  • 使用Pyinstaller发布带界面的程序(解决找不到文件问题)

    Pyinstaller Pyinstaller可以用来打包python代码 xff0c 生成可执行文件 xff08 主流平台都可以 xff09 xff0c 介绍就不说了 xff0c 可以百度或者去官网看看 xff1a https www p
  • 动态分配内存——new/delete

    动态分配内存 1 使用new分配内存2 使用delete释放内存3 例子 xff1a 数组编译时分配内存和运行时分配内存4 动态数组补充 xff1a 程序的内存分配 1 使用new分配内存 使用格式 xff1a span class tok
  • Spring学习(一) Spring环境配置

    工具原料 xff1a JDK Eclipse IDEA 开始学Spring xff0c 应该已经安好java环境了 xff0c 这里我就不赘述了 xff0c 直接开始开始下一步的教程 配置spring环境需要导入spring相关的jar包
  • vue-lottie动画效果(进阶篇)

    vue lottie动画效果 以下是个人见解部分 个人见解 xff1a 优点 xff1a 简单高效 xff0c 动画文件小 xff0c 丝滑流畅 xff0c 动画可控性强 缺点 xff1a 依赖包非常重 xff0c 对动画要求不高的项目不太
  • Ubuntu18.04设置开机自启动自己的程序、脚本

    Ubuntu18 04设置开机自启动自己的程序 脚本 本文使用的机器是win10 43 Ubuntu18 04双系统 xff0c 虚拟机上的Ubuntu18 04操作一样 xff0c 均可参考此文 参考链接 xff0c 言简意赅 xff0c
  • 【Qt】【QDebug】【日志】实用的Qt日志打印-打印时间-线程-数据等信息

    Qt QDebug 日志 实用的Qt日志打印 打印时间 线程 数据等信息 在开发audio和video相关软件时 xff0c 收发速率很关键 xff0c 我们需要打印时间和线程等相关信息等日志 include lt QDebug gt 获取
  • DNS(域名解析协议)详解

    DNS协议 我们之前已经了解过ARP协议 如果说ARP协议是用来将IP地址转换为MAC地址 xff0c 那么DNS协议则是用来将域名转换为IP地址 xff08 也可以将IP地址转换为相应的域名地址 xff09 我们都知道 xff0c TCP
  • Mybatis之使用注解开发CRUD

    上一篇演示了如何使用XML来操作Mybatis实现CRUD xff0c 但是大量的XML配置文件的编写是非常烦人的 因此 Mybatis也提供了基于注解的配置方式 xff0c 下面我们来演示一下使用接口加注解来实现CRUD的的例子 首先是创
  • 查看windows服务器的I/O的3种方法

    http blog chinaunix net uid 20344928 id 5597137 html 碎碎念 xff1a 感觉第二种简单 windows查看I O的方法有3种 xff1a 1 任务管理器 打开任务管理器 xff0c 点击
  • 【Tensorflow】辅助工具篇——scikit-image介绍

    很多时候我们跑deep learning算法的难点不在于搭建网络 xff0c 而是数据获取与处理 xff0c 当你看到大量的数据却无从下手时该是怎样的心情 xff01 这几篇我将为大家介绍目前很多paper代码复现中比较流行的辅助工具 首先
  • 一劳永逸,wsl2出现“参考的对象类型不支持尝试的操作”的解决办法

    wsl在使用是会出现 参考的对象类型不支持尝试的操作 的故障导致无法使用 出现上述问题原因是使用代理软件 xff0c 或游戏加速服务 xff0c winsock出现问题 可以通过注册表的方式 xff0c 排除从winsock中排除wsl即可
  • Python中的路径获取方法总结

    遍历文件夹下文件 xff1a os walk dir path def getFlist path for root dirs files in os walk file dir print 39 root dir 39 root 当前路径
  • Android Studio设置了断点却无法进入断点调试(多进程调试)

    有的时候在Android Studio中明明设置了断点 xff0c 也确认了代码会走到断点处 xff0c 但是执行Debug后 xff0c 断点处会显示打钩 xff0c 却不能但不调试 xff0c 好像代码已经执行过去了 这种问题大概率就是
  • mysql16

    常见面试题 MySQL 中有哪些存储引擎 xff1f InnoDB 存储引擎 InnoDB 是 MySQL 的默认事务型引擎 xff0c 也是最重要 使用最广泛的存储引擎 它被设计用来处理大量的短期 short lived 事务 xff0c
  • CSDN 博客备份工具

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

    导读对于新手而言 xff0c 在 Linux 中使用命令行可能会非常不方便 没有图形界面 xff0c 很难在不同文件夹间浏览 xff0c 找到需要的文件 本篇教程中 xff0c 我会展示如何在 Linux 中查找特定的文件 第一步要做的是通

随机推荐