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-重要案例!!! 的相关文章

  • Draggable JS Bootstrap 模式 - 性能问题

    对于工作中的项目 我们在 JavaScript 中使用 Bootstrap Modal 窗口 我们想让一些窗口可移动 但我们遇到了 JQuery 的性能问题 myModal draggable handle modal header Exa
  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • 如何制作没有 ng-repeat 的模板并使用 Angular-drag-and-drop-lists 将数据传递到 $scope?

    我想用角度拖放列表 https github com marceljuenemann angular drag and drop lists使用我自己的网格模板到所见即所得编辑器 如何构建我自己的 HTML 模板而不需要ng repeat因
  • 网站的主体和元素固定在 980px 宽度上,不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width
  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • Vue 和 Vuex:处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • 如何使用 crypto-js 解密 AES ECB

    我正在尝试将加密数据从 flash 客户端 发送到服务器端的 javascript 在 asp 中作为 jscript 运行 有几个 javascript Aes 库 但它们实际上没有文档记录 我正在尝试使用 crypto js 但无法让代
  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening
  • 如何用另一个响应替换窗口的 URL 哈希?

    我正在尝试使用替换方法更改哈希 URL document location hash 但它不起作用 function var anchor document location hash this returns me a string va
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设
  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0
  • 使用 MongoDB 和 Nodejs 插入和查询日期

    我需要一些帮助在 mongodb 和 nodejs 中按日期查找记录 我将日期添加到抓取脚本中的 json 对象 如下所示 jsonObj last updated new Date 该对象被插入到 mongodb 中 我可以看到如下 la
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接
  • CSS溢出文本显示在几行中,没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n

随机推荐

  • 数组双指针法汇总

    指针移动方向 相向夹逼 同向移动 维护的是一个区间还是只是关心指针指向的两个元素 同向移动的 维护一个区间的双指针法即滑动窗口法 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复制最后一行 订