DOM编程2-重要案例!!!

2023-11-20

2.操作表格.

2.1表格对象的属性和方法.


2.2表格行对象的属性和方法.


2.3表格单元格对象的属性和方法.


3.案例演示.

3.1表格案例.

3.1.1修改标题样式.


3.1.2在表格末尾追新增一行.


3.1.3删除第二行.


3.1.4复制最后一行.


订单案例.

3.2.1增加行.

  • 思路分析:

1)、先通过表格id获取要操作的表格:

var myTable = document.getElementById("order");

2)、在表格的最后一行的位置增加一行,那么表格原先的最后一行(“增加订单按钮”)就会被挤到下一行(首先要获取表格最后一行的下标,因为往表格里面插入行是通过下标插入,表格最后一行的下标等于表格总行数减1,所以首先要先获取表格的总行数)

var rindex = myTable.rows.length-1;

3)、然后给新增的行里面增加列。注意:在这里每行有四列,前三列里面都是一个文本框,第四列里面是两按钮(第一个是删除按钮,第二个是确定和修改合二为一的按钮,一开始显示的是确定按钮,当点过确定之后再变为修改按钮)

// 第0列,里面是个文本框

var r0 = newRow.insertCell(0);

r0.innerHTML = "<input type='text'/>";

// 第1列,里面是个文本框

var r1 = newRow.insertCell(1);

r1.innerHTML = "<input type='text' style='width:20px'/>";//第1列和第2列文本框的宽度比较窄,所以要设宽度值为20px

// 第2列,里面是个文本框

var r2 = newRow.insertCell(2);

r2.innerHTML = "<input type='text' style='width:20px'/>";//第1列和第2列文本框的宽度比较窄,所以要设宽度值为20px

// 第3列,里面是两个按钮,第一个是删除,第二个是确定和修改合二为一的按钮,一开始默认的显示是“确定“。

var r3 = newRow.insertCell(3);

r3.innerHTML = "<input type='button' value='删除'/>&nbsp;<input type='button' value='确定'/>";


3.2.2删除行.

  • 思路分析:

首先,删除行是通过表格对象的deleteRow(index)方法删除,该方法里面要传入要删除的行的下标。现在有如下三个问题需要解决:

问题一:如何获取要删除的行的下标?

表格行对象有个rowindex属性:返回该行在表中的下标rowindex属性要通过行对象(也就是要删除的行)来调用,但是如何来获取要删除的行呢?

问题二:如何获取要删除的行对象?

可以直接通过行id获取该行对象,所以在删除行的方法里面传个行id参数。但是,如何给动态新增的行设置id属性?

问题三:如何给动态新增的行设置id属性

该案例里面现有行的id属性值的组成格式是:row+行下标,我们也按照这样的格式给动态新增的行设置id属性值。在什么时候给动态新增的行设置id属性呢?在增加行的同时就给行设置一个id属性。所以要在“增加行”功能方法addRow()里面给新增加的行设置id属性,如:newRow.id = 'row'+rindex;//给新增加的行设置id属性(值:row+当前行的下标).

  • 如何在动态新增的删除按钮里面调用删除方法?在增加行方法 addRow()里面的删除按钮里面调用,如:


3.2.3确定功能.

  • 实现思路:

确定是用来保存修改后的值:把值从文本框里面获取到(在修改内容时候是在文本框里面进行修改的)然后再保存到对应的列里面。首先通过行id获取要修改的行(那确定方法也要带一个行id参数),然后再获取该行前三列内文本框的值,最后再把获取的文本框的值保存到列里面。

  • 如何在动态新增的确定按钮里面调用确定方法?在增加行方法 addRow()里面的确定按钮调用,如:


3.2.4修改功能.

  • 实现思路:

修改和确定正好相反,确定是先获取文本框的值然后赋到单元格里面,而修改则是先获取单元格里面的值然后赋给文本框。修改完成后,按钮又要由“修改”变为“确定”,并且添加事件调用确定方法。


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

DOM编程2-重要案例!!! 的相关文章

  • JS 保留以零结尾的小数[重复]

    这个问题在这里已经有答案了 在JavaScript中 是否可以 锁定 十进制数 以保留以零结尾的 浮点数 例如 我有 2 个不同的数字 如下所示 伪代码 let a 1 0 let b 1 00 a b true should be fal
  • 更改API数据输出的布局

    我是 API 集成和 PHP 的新手 我最近将 VIN 解码器集成到我的应用程序中 在输入框中输入车辆的 VIN 选择提交 然后就会显示 API 数据库中有关该车辆的所有信息 数据存储为关联数组 其中包含类别及其相应元素 例如 对于 VIN
  • CSS 显示无不工作

    media screen and min width 900px and max width 1215px menu display none 这不起作用 div 仍然可见 但是 如果我将 div 更改为 div class menu 代替
  • karma/jasmine 控制台更详细的测试结果

    我使用 Karma 和 Jasmine 进行 javascript 单元测试 假设我有一个失败的测试 如下所示 expect objectA toEqual expectedObjectA 当失败时 我看到控制台上转储了两个对象 并显示一条
  • 将 Firebase FCM 添加到 ReactJS 应用程序

    我正在尝试向我的 ReactJS 应用程序中的用户发送推送通知 我已添加 firebase 请求用户通知权限 这正在发挥作用 但现在我想注册设备令牌 但这给了我错误 消息传递 我们无法注册默认的 Service Worker 无法注册 Se
  • JavaScript中如何确保输入的值是数字而不是字符串?

    我创建了这个函数 function num var x prompt please enter your first number var y prompt please enter your second number if isNaN
  • 如何仅显示/隐藏此 bootstrapvue 表的第二列和第三列?

    下面的代码将显示 隐藏 a 中的所有列BootstrapVue桌子 代码的来源就是这里的答案 使用 bootstrap vue 组件和 bootstrap 3 动态显示 隐藏列 https stackoverflow com questio
  • CSS 网格框架中的间距有什么作用?

    我正在深入研究 Web 开发 并且正在使用 Blueprint CSS 框架 其中包括网格系统 我有几个问题 水沟有什么用处 当然 它们不用于在列之间包含空间 因为您可以使用 margin CSS 属性来实现这一点 对吗 或者排水沟只是一种
  • 如何使用 CSS 媒体查询检测设备方向?

    在 JavaScript 中 可以使用以下方式检测方向模式 if window innerHeight gt window innerWidth portrait true else portrait false 但是 有没有一种方法可以仅
  • 电话输入自动填充会删除国际前缀

    我有一个类型为 tel 的输入字段 并启用了自动完成功能
  • 内嵌显示定义术语和描述

    我正在为页面上的某些元素使用定义列表 并需要它们内联显示 例如 它们normally看起来像 我需要它们看起来像 注意多个 DD 我可以让它们在 moz 中使用 float 来正常工作 但无论我尝试什么 它们都无法在 IE 中工作 我通常会
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • Javascript 浮点乘以 100 仍然有错误

    我有一个货币字段的文本输入 我在字段中输入 33 91 并在尝试使用 乘以 100 技术时得到以下结果 var curWth parseInt trans withdraw index val 100 3390 var curWth par
  • 语法错误:意外的标记“?”在 repl.it 上用 JavaScript 制作不和谐机器人时 [重复]

    这个问题在这里已经有答案了 我收到错误 const token this client token this client accessToken SyntaxError Unexpected token Discord 机器人代码 con
  • Service Worker 与 Shared Worker

    Service Worker 和 Shared Worker 有什么区别 我什么时候应该使用 Service Worker 而不是 Shared Worker 反之亦然 Service Worker 具有共享 Worker 之外的附加功能
  • 尝试使用 Javascript 解决对称差异

    我正在尝试找出对称的解决方案 使用 javascript 完成以下任务的差异 目标 接受未指定数量的数组作为参数 保留数组中数字的原始顺序 不删除单个数组中数字的重复项 删除数组中出现的重复项 因此 例如 如果输入是 1 1 2 6 2 3
  • 使用 ref 触发反应 dropzone 不起作用

    我正在实现这个库 https github com felixrieseberg React Dropzone Component https github com felixrieseberg React Dropzone Compone
  • 为什么 Node.js 应用程序只能从 127.0.0.1/localhost 访问?

    我本来打算教我的朋友介绍 Node 但是后来 我想知道为什么这个代码来自nodejs org var http require http http createServer function req res res writeHead 20
  • Bootstrap 导航栏与 Google 位置重叠自动完成下拉菜单

    我有一个导航栏 我试图在其中添加一个地点搜索框 除了谷歌位置提示框的一小部分被导航栏重叠 如下图所示 之外 一切几乎都有效 我尝试过改变z index输入框的值改为10或2000或90000但似乎没有效果 我还缺少其他需要做的事情吗 这是
  • ng-include 和 ng-view 不同时加载

    下面是我的应用程序的结构 很简单 页眉和页脚是非常小的文件 而主页上的 ng view 要大得多 当我进入该页面时 我注意到了这一点 首先加载两个 ng include 然后 ng view 出现 页脚被推到底部 页脚闪烁大约 0 1 秒

随机推荐

  • 数组双指针法汇总

    指针移动方向 相向夹逼 同向移动 维护的是一个区间还是只是关心指针指向的两个元素 同向移动的 维护一个区间的双指针法即滑动窗口法 2Sum 排序后两头往中间夹逼的双指针法 指针为什么可以不回退 即为什么可以i只 j只 当A i A j
  • jvm学习——7.运行时数据区之堆

    一个进程对应一个jvm实例 一个运行时数据区 又包含多个线程 这些线程共享了方法区和堆 每个线程包含了程序计数器 本地方法栈和虚拟机栈 66 核心概述 1 一个jvm实例只存在一个堆内存 堆也是java内存管理的核心区域 2 Java堆区在
  • kuboard获取token命令

    输入命令查看 echo kubectl n kube system get secret kubectl n kube system get secret grep kuboard user awk print 1 o go templat
  • u8系统怎么连接服务器,u8客户端连接服务器流程

    u8客户端连接服务器流程 内容精选 换一换 请点击下载 下载并安装桌面版客户端 您已经从企业的会议管理员那儿获取用户帐号了吗 快使用用户帐号登录客户端 开启会议之旅 桌面客户端定位基于电脑使用 在会议室中不支持接入鹅颈麦克风 音箱等外设使用
  • QT的QListWidget之单击双击增删改详解

    QListWidget是列表框控件 它是通过QListWidgetItem列表项来进行操作 我们的增删改操作也是围绕着它来开展 需要注意的是 删除操作 需要先断开QListWidget的信号和槽连接 否则会程序崩溃 void MainWin
  • opencv畸变校正的两种方法

    opencv中畸变校正有两种方法 1 undistort 直接进行畸变校正 void cv undistort InputArray src 原始图像 OutputArray dst 矫正图像 InputArray cameraMatrix
  • echarts中的地图展示所有省份以及悬浮上去展示具体的信息

  • stm32 HAL库 Flash操作简介

    stm32 HAL库 Flash操作简介 目录 第一stm32 flash介绍 查看代码段 以判断代码长度 flash的基本操作规则 stm32 HAL库 Flash操作指南 stm32f1xx hal flash c stm32f1xx
  • 在家做什么手工赚钱,这5种比较适合在家操作!

    对于很多怀孕的女生来说 呆在家里确实很无聊 大部分人呆在家里只能看看电视 玩玩手机 很多的孕妈都会抱怨 真是无聊透了 所以对于很多的孕妈来说 都想找点事做来缓解自己无聊的情绪 避免得了抑郁症 给宝宝带来不好的环境 那么怀孕在家里 有什么轻松
  • SpringSecurity的使用和流程详解(二)

    文章目录 登录 准备工作 核心代码 校验 准备工作 核心代码 测试 退出登录 登录 准备工作 添加依赖
  • 线程池代码

    线程池 Global h pragma once const int DEFAULT POOL SIZE 10 const int STARTED 0 const int STOPPED 1 Mutex h pragma once incl
  • 鸡肋的RDP反制

    更新时间 2023年07月19日09 18 29 为什么叫鸡肋 鸡肋者 食之无肉 弃之有味 你说不能成吧 但是有成功案例 你说成了吧 要求太高 还要看运气的 一句话 对方需要开启磁盘共享 不开启 没办法反制 1 背景介绍 在很多攻防中 蓝队
  • 向量叉乘判断顺时针还是逆时针

    可以通过向量的叉乘判断一条线旋转的过程是顺时针还是逆时针的 有两个向量AB和AC 将两个向量进行叉乘 direct AB x AC 当direct gt 0时 为逆时针旋转 当direct lt 0时为顺时针旋转 当写类似于旋转按钮的控件的
  • 螺纹检测案例-螺距测量-大径小径检测-螺牙检测

    齿轮检测分析 Gear inspection and analysis 螺纹结构及检测要素 1 大径 宽径 2 小径 窄径 3 中经 4 螺距 间距 5 螺牙高度 深度 VisionBank 软件螺纹检测工具 02 01 螺纹检测分析流程
  • 高性能MySQL实战(二):索引

    我们在上篇 高性能MySQL实战 一 表结构 中已经建立好了表结构 这篇我们则是针对已有的表结构和搜索条件为表创建索引 1 根据搜索条件创建索引 我们还是先将表结构的初始化 SQL 拿过来 CREATE TABLE service log
  • 野火STM32F103教学视频完整目录(配合霸道-指南者开发板)

    野火STM32F103教学视频 P1 入门篇 2 如何安装KEIL5 flv 野火STM32F103教学视频 P2 入门篇 3 如何使用DAP仿真器下载程序 flv 野火STM32F103教学视频 P3 入门篇 4 串口ISP一键下载原理分
  • tmux使用方法

    tmux使用指南 比screen好用n倍 知乎 当你开启一个session的时候会默认开启一个window 这个截图就是一个window 而这个window可以拆成很多分subwindow 在这里就是 左上角Asubwindow 左下角Bs
  • 微信小程序优化多次跳转后卡顿问题

    一 微信小程序多次跳转会产生卡顿的原理 通过wx navigateTo 跳转 都会出现保留当前页面 打开新的页面机制 wx navigateTo不会将旧页面出栈 会将新页面入栈 栈内元素个数增加 栈内元素5个时 不能再跳转 手机性能好点 可
  • fastjson的JSONObject.toJSONString方法失效问题

    String toJSONString Object object 问题 该方法序列化的object对象 需要Object类中包含属性的get方法 如果没有get方法 则会序列化出一个空数组 解决 增加 Data注解 或 添加成员变量的ge
  • DOM编程2-重要案例!!!

    2 操作表格 2 1表格对象的属性和方法 2 2表格行对象的属性和方法 2 3表格单元格对象的属性和方法 3 案例演示 3 1表格案例 3 1 1修改标题样式 3 1 2在表格末尾追新增一行 3 1 3删除第二行 3 1 4复制最后一行 订