如何在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 ...
随机推荐
- R-----shiny包的部分解释和控件介绍
R-----shiny包的部分解释和控件介绍 作者:周彦通.贾慧 shinyApp( ui = fixedPage( fixedPanel( top = 50, right=50, width=200 ...
- IIS中报错弹出调试,系统日志-错误应用程序名称: w3wp.exe,版本: 8.5.9600.16384,时间戳: 0x5215df96(360主机卫士)
偶遇一次特殊情况,在使用Web系统导入数据模版(excel)时,服务端IIS会报错并弹出调试框,然后整个网站都处于卡死的debug状态,如果点否不进行调试,则IIS会中断调试,Web系统继续执行,运行 ...
- P1972 [SDOI2009]HH的项链
洛谷的分块练习题 看到讨论中说分块莫队被卡就写了树状数组...(但感觉做法和莫队的思想有点像?) #include<bits/stdc++.h> using namespace std; ...
- C++与蓝图互调
Kismet库 蓝图方法cpp使用 例:打LOG:Print String 蓝图节点的鼠标tips:Target is Kismet System Library #include "Run ...
- 本地Git与Github建立关联
准备 本地与Github建立连接,需要用到SSH公钥.一般安装完Git,会在用户目录中生成一个 .ssh的文件夹 如果没有此文件夹,可以通过命令创建 $ ssh-keygen -t rsa -C &q ...
- 产品研发不等待 i.MX6Q全新推出增强版本 官方店铺下单双重优惠
迅为全新推出PLUS版本的i.MX6Q方案,版本介绍:它是NXP公司全新推出的i.MX6Q增强版新品,显著增强了图形和存储器性能,面向较高图形性能的先进消费电子.汽车和工业多媒体应用的多核平台.
- JMX - JMX定义
JMX定义 JMX超详细解读 https://www.cnblogs.com/dongguacai/p/5900507.html 开源框架是如何通过JMX来做监控的(一) - JMX简介和Standa ...
- Mac 与 windows eclipse 快捷键对照
Mac windows 方法注释 option+command+j alt+shift+j 在方法里上右击,source -> Generate Element Comment 删除当前行 ...
- ueditor内容带格式回显(html字符串回显)
简单描述:项目里有个地方用到啦ueditor,用来输入XX描述就用电影film代替,保存后,获取到ueditor里的内容(html字符串),保存到数据库. 吐槽:回显的时候,无论怎么处置,就是死活不好 ...
- vue结构详解
相关文件和文件夹的含义: build 文件夹: 里面是对 webpack 开发和打包的相关设置,包括入口文件.输出文件.使用的模块等:config 文件夹: 主要是指定开发和打包中的静态资源路径.要压 ...