业务需求:



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

解决办法

以该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. (Python3 自定义函数实现数字金字塔 代码

    def kzkz(ceng): for i in range(1,ceng+1): print(" "*(ceng-i),end='') n=i while(n>=1): p ...

  2. ARIMA模型原理

    一.时间序列分析 北京每年每个月旅客的人数,上海飞往北京每年的游客人数等类似这种顾客数.访问量.股价等都是时间序列数据.这些数据会随着时间变化而变化.时间序列数据的特点是数据会随时间的变化而变化. 随 ...

  3. mysql存储引擎和索引

    正确的创建合适的索引,是提升数据库查询性能的基础. 第一章 mysql之索引 索引的定义:索引是为了加速对表中数据行的检索而创建的一种分散存储的数据结构. 我们为什么要使用索引: a.极大的减少存储引 ...

  4. MongoDB代码——Python篇

    需要安装的库:pymongo 一.添加文档 from pymongo import MongoClient # 连接服务器 conn = MongoClient("localhost&quo ...

  5. word20170107当地交通 Local transportation有用的词和句子

    有用的词: transportation: 交通 airport express: 机场快线 shuttle bus: 班车 taxi/cab: 出租车 meter: 打表 limousine:专车. ...

  6. pandas基础用法

    首先生成一维数组 data = pd.Series([1,2,3,4,5,6,7,8,9])data运行结果 data.head()#默认取前五条,当然也可以加参数 data.tail()#默认取前五 ...

  7. LeetCode第二十二题-创建n对括号

    Generate Parentheses 问题简介: 给定n对括号,编写一个函数来生成格式正确的括号的所有组合. 举例: 给定n = 2,解集是: [ “()()”, “(())” ] 给定n = 3 ...

  8. 机器学习基石8-Noise and Error

    注: 文章中所有的图片均来自台湾大学林轩田<机器学习基石>课程. 笔记原作者:红色石头 微信公众号:AI有道 上一节课,我们主要介绍了VC Dimension的概念.如果Hypothese ...

  9. JAVA学习笔记(3)—— 抽象类与接口

    1. Java 抽象类 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类 ...

  10. Python——字符串

    p ython——字符串 ①加法 连接两个字符串 ②乘法  复制字符串 python——转义字符 \n 换行 \' 单引号 \'' 双引号 \\ 反斜杠 raw字符串:无视转义字符   转义: 字符串 ...