业务需求:



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

解决办法

以该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. C-Free 5.0 注册码

    用户名:123123 电子邮件:111@qq.com 注册码:mJ2Em9jdm7jGwYTpmp2H6KmehtvO 经过验证,可以正常注册.

  2. Python编程四大神兽:迭代器、生成器、闭包和装饰器

    生成器 生成器是生成一个值的特殊函数,它具有这样一个特点:第一次执行该函数时,先从头按顺序执行,在碰到yield关键字时该函数会暂停执行该函数后续的代码,并且返回一个值:在下一次调用该函数执行时,程序 ...

  3. PhpStorm常用快捷键以及如何连接外部服务器

    PhpStorm常用快捷键以及如何连接外部服务器 PhpStorm作为我们phper使用的一款IDE,其功能是非常强大的,现在记录下常用的快捷键以及如何使用它与外部服务器进行连接使用. 一.Keyma ...

  4. Navicat连接阿里云服务器Linux下的Mysql

    用Navicat连接阿里云ECS服务器上的MySQL数据库   今天用navtive连接阿里云服务器(Linux)的数据库时,老是连接不上,并且报10060错误,要通过以下两个步骤解决: 1.先进入l ...

  5. C# - 设计模式目录

    什么是设计模式 设计模式(OOD)是在面向对象编程(Object Oriented Programming,OOP)中针对在以往的编程里出现的问题所提出的一种解决思路.一种设计类型时的思想和经验,对未 ...

  6. 关于操作HDFS的一个问题

    近日写程序定时任务调Hadoop MR程序,然后生成报表,发送邮件,当时起了两个任务A和B,调MR程序之前,会操作hdfs(读写都有),任务A每天一点跑,任务B每十分钟跑一次,B任务不会调用MR程序, ...

  7. Python自动化中的元素定位(一)

    1.使用selenium中的webdriver模块对浏览器进行操作 1)from selenium import webdriver 加载模块 2)b = webdriver.Friefox() 打开 ...

  8. java hashmap的一些分析记录

    最近朋友去面试被问了些hashmap相关的问题,hashmap的初始容量啊,什么操作最耗时等,之前看过hashmap的源码,正好这里也在总结下. 主要围绕下面几个点: HashMap是由数组+链表(j ...

  9. MACE环境搭建

    主要参考https://blog.csdn.net/u012505617/article/details/85763065 1.安装docker 2.安装NDK https://www.linuxid ...

  10. 常见jquery面试题

    jQuery 面试问题和答案 JavaScript 是客户端脚本的标准语言,而 jQuery 使得编写 JavaScript 更加简单.你可以只用写几行的jQuery 代码就能实现更多的东西. 它是最 ...