如何在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支持了

posted @ 2019-03-26 20:10  darknessplus  阅读(1287)  评论(0编辑  收藏  举报