如何在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 ...
随机推荐
- MySql的Communications link failure解决办法
在使用JDBC连接mysql时可能会遇到以下错误: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications li ...
- Java 集合系列03之 ArrayList详细介绍
ArrayList做为List接口中最常用的实现类,必须掌握. 一.ArrayList简介 与Java中的数组相比ArrayList的容量可以动态增加.它继承与AbstractList,实现了List ...
- jpa Auditor 自动赋值与自定义 @CreatedBy @LastModifiedBy @CreatedDate @LastModifiedDate
在spring jpa audit 中,在字段或者方法上使用注解@CreatedDate.@CreatedBy.@LastModifiedDate.@LastModifiedBy,当进行实体插入或者更 ...
- 如何局部覆盖element-ui的默认样式
- springMVC2
一.视图解析流程 springMVC中视图解析器 1.视图最终的页面渲染.view视图来做,render 2.跳转到目标视图,请求转发. 3.遍历视图解析器,逻辑视图转换为物理视图. 1)视图 视图的 ...
- 2018-2019-2 20165325 《网络对抗技术》 Exp5:MSF基础应用
2018-2019-2 20165325 <网络对抗技术> Exp5:MSF基础应用 实验内容(概要) 1.1 一个主动攻击实践,本实验选择 ms17_010_eternalblue(成功 ...
- Django_路由详
动态路由和动态参数捕获 动态路由:url支持正则表达式, 访问的url能够匹配成功就去执行对应的视图函数 捕获参数: # 捕获参数,位置传参 url(r'^data/([0-9]{4})/([0-2] ...
- js-图片预加载
//图片预加载 //闭包模拟局部作用于 (function($){ function Preload(imgs,options){ this.imgs = (typeof imgs === 'st ...
- spring 启动找不到shiro中 自定义的realm对应的class问题
干巴巴盯着项目半天,启动了好多次,每次都是sping报错找不到shiro配置文件中自定义的realm对应的class文件,明明有的,就是找不到. 后来将eclipse对应的jdk1.7 更新为1.8 ...
- java - day007 - 继承(2), 多态,面向对象,抽象类
继承 新建子类对象是,先新建父类对象,并执行父类的构造方法, 默认执行父类的无参构造放方法 可以 手动调用父类的有参构造 super(参数 ) super super.xxx() 调用父类成员 一般重 ...