如何在HTML表格里定位到一行数据
业务需求:
在这样一个表格里,通过点击“确认”按钮,收集该行数据,向后台发送请求
解决办法
以该button为锚获取父节点,再由父节点获取各个元素的值
获取子元素又有很多办法,包括通过下标获取子元素,通过标签名获取,通过class获取等等
var root=button.parentNode.parentNode;
var name=root.getElementsByClassName("name").item(0).value
var price=root.getElementsByClassName("price").item(0).value
var nums=root.getElementsByClassName("nums").item(0).value
为每个元素生成唯一的id,从每个元素的id获取其值
后记
其实可以把每行写成一个form表单,这样的好处是不用手动再前端获取各个字段的值,缺点是主流浏览器不支持table与form嵌套,也就微软家的Edge和IE支持了
如何在HTML表格里定位到一行数据的更多相关文章
- Excel2010表格里设置每页打印时都有表头
在打印Excel表格时常常会出现如果存在多页打印时,往往从第二页开始就会出现没有表头的情况,导致到后面都不清楚对应的是哪个数据,查看时也很麻烦,下面就将为大家介绍如何在Excel表格里设置每页打印时都 ...
- selenium webdriver 表格的定位方法练习
selenium webdriver 表格的定位方法 html 数据准备 <html> <body> <div id="div1"> <i ...
- selenium之表格的定位
浏览器网页常常会包含各类表格,自动化测试工程师可能会经常操作表格中的行,列以及某些特定的单元格,因此熟练掌握表格的定位方法是自动化测试实施过程中必要的技能. 被测试网页的HTML代码 <!DOC ...
- 如何在Web页面里使用高拍仪扫描上传图像
如何在Web页面里使用高拍仪扫描上传图像 市场上所有的高拍仪都支持扫描图片并保存到本地,一般公司都会提供控件.开发人员只需要在页面集成就可以进行拍照和扫描.只不过一般扫描的图片是保存在本地固定的文件夹 ...
- 如何让一个json文件显示在表格里
<body> //首先得把架子搭起来 <table id = "tb" border="1"> <tr></tr> ...
- 如何在Word表格中的某一栏添加背景颜色
如何在Word表格中的某一栏添加背景颜色 编写人:CC阿爸 2014-3-14 用鼠标选中某一个单元格然后右键单击 下拉菜单选择.<边框和低纹>然后点<低纹>选项卡 选中色卡 ...
- vue element-ui表格里时间戳转换成时间显示
工作中遇到后台给的表格数据里时间是一个13位的时间戳,需要转换成时间显示在表格里, 可以用element-ui表格自带的:formatter函数,来格式化表格内容: // 时间戳转换成时间 // 使用 ...
- 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...
- dtgrid 手动条件删除表格中的某一行
dtgrid 手动条件删除表格中的某一行 var grid = $.fn.DtGrid.init(dtGridOption); $(function () { grid.load(); }); fun ...
随机推荐
- iview服务不可以被访问解决办法
一般情况是因为服务的host设置为localhsot了,修改为0.0.0.0即可. 打开...\iview-admin-dev\node_modules\webpack-dev-server\bin下 ...
- Spring ElasticsearchTemplate 经纬度按距离排序
es实体,用 @GeoPointField 注解,值为:中间逗号隔开,如 29.477000,119.278536(经度, 维度) @Document(indexName = "v_inte ...
- 域 搭建OU 组织单元
以这个界面开始操作: 在 baidu.com 右键---新建----组织单位----北京分公司 在 baidu.com 右键---新建----组织单位----北京分公司 在北京分公司 和南京分公司下面 ...
- 文件上传(StringMVC)
我们经常会使用的一个功能是文件下载,既然有文件下载就会有文件上传,下面我们来看一下文件上传是如何实现的 首先准备好一个页面 jsp <style type="text/css" ...
- Git分支实战入门详细图解
现在我们模拟一个简单的分支和合并案例,其中工作流可供真实项目借鉴. (1)在master开展工作 (2)为新的需求创建分支 (3)在新的分支上展开工作 这时,你接到一个电话,说项目有一个严重的问题需要 ...
- C#调用Bartender打印
BarTender是一款优秀的条形码打印软件,可以支持很多种类型的条形码设计和打印,具体大家可参考他的官网(http://www.seagullscientific.com/aspx/products ...
- 将Chrome插件Momentum背景图片设为桌面壁纸
Momentum简介 Momentum插件是一款自动更换壁纸,自带时钟,任务日历和工作清单的chrome浏览器插件.官方的解释就是:替换你 Chrome 浏览器默认的“标签页”.里面的图片全部来自50 ...
- Java 多线程 - Synchronized关键字
目录 1-Synchronized 关键字概述 2- Synchronized关键字作用域 3- Synchronized 原理(反编译指令解释) 正文 1-Synchronized 关键字概述 由于 ...
- L2-006 树的遍历 (25 分)
链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805069361299456 题目: 给定一棵二叉树的后序遍历和中序 ...
- python 列表中[ ]中冒号‘:’的作用
中括号[ ]:用于定义列表或引用列表.数组.字符串及元组中元素位置 list1 = [, ] list2 = [, , , , , , ] print ] print :] 冒号: 用于定义分片. ...