业务需求:



在这样一个表格里,通过点击“确认”按钮,收集该行数据,向后台发送请求

解决办法

以该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表格里定位到一行数据的更多相关文章

  1. Excel2010表格里设置每页打印时都有表头

    在打印Excel表格时常常会出现如果存在多页打印时,往往从第二页开始就会出现没有表头的情况,导致到后面都不清楚对应的是哪个数据,查看时也很麻烦,下面就将为大家介绍如何在Excel表格里设置每页打印时都 ...

  2. selenium webdriver 表格的定位方法练习

    selenium webdriver 表格的定位方法 html 数据准备 <html> <body> <div id="div1"> <i ...

  3. selenium之表格的定位

    浏览器网页常常会包含各类表格,自动化测试工程师可能会经常操作表格中的行,列以及某些特定的单元格,因此熟练掌握表格的定位方法是自动化测试实施过程中必要的技能. 被测试网页的HTML代码 <!DOC ...

  4. 如何在Web页面里使用高拍仪扫描上传图像

    如何在Web页面里使用高拍仪扫描上传图像 市场上所有的高拍仪都支持扫描图片并保存到本地,一般公司都会提供控件.开发人员只需要在页面集成就可以进行拍照和扫描.只不过一般扫描的图片是保存在本地固定的文件夹 ...

  5. 如何让一个json文件显示在表格里

    <body> //首先得把架子搭起来 <table id = "tb" border="1"> <tr></tr> ...

  6. 如何在Word表格中的某一栏添加背景颜色

     如何在Word表格中的某一栏添加背景颜色 编写人:CC阿爸 2014-3-14 用鼠标选中某一个单元格然后右键单击 下拉菜单选择.<边框和低纹>然后点<低纹>选项卡 选中色卡 ...

  7. vue element-ui表格里时间戳转换成时间显示

    工作中遇到后台给的表格数据里时间是一个13位的时间戳,需要转换成时间显示在表格里, 可以用element-ui表格自带的:formatter函数,来格式化表格内容: // 时间戳转换成时间 // 使用 ...

  8. 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...

  9. dtgrid 手动条件删除表格中的某一行

    dtgrid 手动条件删除表格中的某一行 var grid = $.fn.DtGrid.init(dtGridOption); $(function () { grid.load(); }); fun ...

随机推荐

  1. Linux常用命令大全(转载收藏)

    转载自鸿燕藏锋:https://www.cnblogs.com/yjd_hycf_space/p/7730690.html 最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比 ...

  2. python—shutil模块

    该模块拥有许多文件或文件的删除.移动.复制.重命名等功能. 1.copy():复制文件 格式:shutil.copy(来源文件,目标地址) 返回值:返回复制之后的路径 2.copy2():复制文件和状 ...

  3. java 中final关键字

    1.final变量,一旦该变量被设定,就不可以再改变该变量的值. final关键字定义的变量必须声明时赋值.一旦一个对象引用被修饰为final后,它只能恒定指向一个对象,一个既是static和fina ...

  4. mvc RedirectToAction、mobile 重定向地址栏未改变

    @using (Html.BeginForm("actionName", "controllerName", FormMethod.Post, new { da ...

  5. (三)ORB特征匹配

    ORBSLAM2匹配方法流程 在基于特征点的视觉SLAM系统中,特征匹配是数据关联最重要的方法.特征匹配为后端优化提供初值信息,也为前端提供较好的里程计信息,可见,若特征匹配出现问题,则整个视觉SLA ...

  6. re模块 - 正则表达式 疏理(一)

    在网上总是很难找到令自己比较满意的,关于正则表达式的文章.所以决定自己来总结一波,并配上相应的示例. 正则表达式:定义了规则,用来字符串处理. 用途: 1.匹配 - 符合规则的字符串,则认为匹配了. ...

  7. selenium自动化测试在富文本中输入信息的方法

    第一次用selenium+python编写自动测试脚本,因为页面中插入了富文本编辑,开始怎么都无法输入进去,度娘好多方法都无效,分享踩坑的经历一是为了记录一下自己的成长,二是为了给同样摸索seleni ...

  8. VS Code 1.28版本设置中文界面的方法

    最近将vscode升级到1.28版本,发现升级后默认界面变成英文了,而且在按照网上的说法在locale.json设置locale: "zh-cn"也不起效,解决的解决方法很简单: ...

  9. 关于Integer比较问题

    public class Test { public static void main(String[] args) { Integer a=127; Integer b=127; System.ou ...

  10. MySQL存储过程(PROCEDURE)(一)

    一.定义与目的: 定义:存储过程是数据库 SQL 语言层面的代码封装与重用(是数据库中存储复杂程序,以便外部程序调用的一种数据库对象): 目的:我们为了完成特定功能的SQL语句集,经编译创建并保存在数 ...