业务需求:



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

解决办法

以该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. 我常用的sublime快捷键整理

    由于很多人用sublime作为编辑器,我想我平时学习的时候也可以用sublime写demo,顺便熟悉一下sublime的使用方法.慢慢发现sublime中快捷键能节省很多时间,很方便,但是同时快捷键很 ...

  2. 第30月第13天 supportedInterfaceOrientationsForWindow旋转

    1. 对于做视频横屏播放的情况下:做旋转有3种方法. 第一种:就是网上说的用旋转矩阵方法CGAffineTransformMakeRotation来做,直接旋转某个view,之后setFrame,至于 ...

  3. HTML基础之JS中的序列化和反序列化-----字符串的json类型与字典之间的相互转换

    前端向后端传递数据的时候不能直接传递对象(如,字典),只能发字符串,Jason就是一种字符串所以前端向后端发送数据的时候,需要将对象转换成字符串 如果前端向后端发送的是json类型,需要通过JSON. ...

  4. 题解 洛谷P3936 Coloring

    考虑搜索,发现复杂度爆炸        贪心,正确性过低(~~实测爆炸~~) 于是,~~发现~~这题是模拟退火 这里不讲解退火的定义了,初学退火可以去平衡点 退火本身维护一个答案图像,答案的q,当前图 ...

  5. 3D Slicer中文教程(六)—调用matlab函数(MatlabBridge使用方法)

    1.安装MatlabBridge插件 (1)在工具栏找到Extension,点击进入Extension Manager (2)找到MatlabBridge,安装 2.配置MATLAB环境 (1)在模块 ...

  6. 我的redis入门之路

    1:操作环境:vmware12 , centOs7 ,redis5.0.3 centOs7安装与下载链接(原文地址): https://blog.csdn.net/qq_42570879/articl ...

  7. 发送邮件工具类MailHelper

    using System; using System.Net; using System.Net.Mail; using System.Text; using System.Threading; na ...

  8. Bootstrap模态框垂直高度居中问题

    Bootstrap对话框改变其默认宽高,高度不会自适应居中.为解决这个问题,最好的方式是能够通过css来解决,试了几种网上的方案发现都不行.然后想到可以通过js来修正,什么时候修正最好?于是想到可以注 ...

  9. Linux网络技术管理及进程管理

    OSI七层模型和TCP/IP四层模型 OSI七层模型:OSI(Open System Interconnection)开放系统互连参考模型是国际标准化组织(ISO)制定的一个用于计算机或通信系统间互联 ...

  10. macos 命令行安装 ipa

    macos 命令行安装 ipa 苹果发神经后itunes已经无法在安装app了,如果有知道的兄弟可以告诉我啊 ideviceinstaller 使用这个开源项目可以在macos下安装app brew ...