如何在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 ...
随机推荐
- Linux系统GNOME主题安装与Tweaks工具使用
需要软件: GNOME Tweaks--使主题修改更加容易一个工具 安装主题: 下载主题:mac themes下载链接:https://www.gnome-look.org/p/1241688/ 这里 ...
- Python+Selenium+Unittest框架使用——Selenium——模拟操作浏览器(三)
1.浏览器大小的控制 Set_window_size()是控制浏览器大小 Maximize_window()浏览器全屏显示 from selenium import webdriver #导入sele ...
- hibernate之事务处理
四个方面:事务的性质,事物的隔离级别,hibernate配置事务的隔离级别,使用事务小案例 1. 事务的性质: 四种性质:原子性,一致性,隔离性,持久性. 原子性:原子,不可再分.一个操作不能分为更小 ...
- C# 获取电脑配置信息
对于软件绑定电脑常用到的方法汇总 public class Computer { public string MyProperty { get; set; } /// <summary> ...
- Python 高级特性之:生成器(generator)和迭代器(Iterator)
前言: 之前学习Python自动化,接触了不少python的学习,对生成器印象尤其深,网上也看了很多介绍,下面主要是这些概念的个人学习整理(如侵删). 正文: 如要创建一个非常大的列表,受到内存限制, ...
- 前端DES加密
/** * DES加密/解密 * @Copyright Copyright (c) 2018 * @author mrDu * @see DESCore */ /* * encrypt the str ...
- kali中的webshell工具--webacoo
webacoo webshell其实就是放置在服务器上的一段代码 kali中生成webshell的工具 WeBaCoo(Web Backdoor Cookie) 特点及使用方法 类终端的shell 编 ...
- Docker-----仓库
安装registry 安装并启动docker yum -y install docker systemctl enable docker systemctl start docker 下载regist ...
- 【easy】257. Binary Tree Paths 二叉树找到所有路径
http://blog.csdn.net/crazy1235/article/details/51474128 花样做二叉树的题……居然还是不会么…… /** * Definition for a b ...
- 02使用java脚本向Pxc集群写入数据
使用java脚本向Pxc集群写入数据 批量写入pxc集群程序 导入mysql驱动包 # 批量插入数据的java脚本 package pxc_demo; import java.sql.Connecti ...