获取input[type="checkbox"]:checked 所在tr中特定元素
1.要求如下
2.html源码
<div class="btn">
<button type="button" onclick="getYuan()">获取</button>
</div>
<div class="forms">
<table>
<tbody>
<tr id="0" class="R1">
<td id="_i_" style="text-align:center;width:20px;">1</td>
<td style="text-align:center;width:20px;">
<span>
<input type="hidden" name="_s_omorderdeliverheaderv.list" value="0">
<input type="checkbox">
</span>
</td>
<td style="width:50px;"><a
href="../om/omorderdeliverlinesv.do?m=s&omorderdeliverheaderv.form.header_id=123862">查看</a>
</td>
<td style="width:50px;"><a
href="../om/omorderdeliverlinesv.do?m=e&omorderdeliverheaderv.form.header_id=123862">修改</a>
</td>
<td style="width:125px;">LL202307070017<input type="hidden"
name="omorderdeliverheaderv.list.deliver_code" value="LL202307070017"></td>
<td style="width:50px;">已发货<input type="hidden" name="omorderdeliverheaderv.list.status" value="2">
</td>
<td>0100527<input type="hidden" name="omorderdeliverheaderv.list.vendor_code" value="0100527"></td> <td>YH22890</td>
<td>2023-07-07 00:00:00<input type="hidden" name="omorderdeliverheaderv.list.deliver_date"
value="2023-07-07 00:00:00"></td>
<td><input type="hidden" name="omorderdeliverheaderv.list.receive_date" value=""><input
type="hidden" name="omorderdeliverheaderv.list.header_id" value="123862"><input
type="hidden" name="omorderdeliverheaderv.list.vendor_id" value="7425"><input type="hidden"
name="omorderdeliverheaderv.list.sheet_type_id" value="2045"><input type="hidden"
name="omorderdeliverheaderv.list.address" value="*"><input type="hidden"
name="omorderdeliverheaderv.list." value="0"><input type="hidden"
name="omorderdeliverheaderv.list.." value="0"><input type="hidden"
name="omorderdeliverheaderv.list.header_id.k" value="123862"></td>
</tr>
<br>
<tr id="1" class="R2">
<td id="_i_" style="text-align:center;width:20px;">2</td>
<td style="text-align:center;width:20px;"><span><input type="hidden"
name="_s_omorderdeliverheaderv.list" value="0"><input type="checkbox"></span></td>
<td style="width:50px;"><a
href="../om/omorderdeliverlinesv.do?m=s&omorderdeliverheaderv.form.header_id=123214">查看</a>
</td>
<td style="width:50px;"><a
href="../om/omorderdeliverlinesv.do?m=e&omorderdeliverheaderv.form.header_id=123214">修改</a>
</td>
<td style="width:125px;">LL202307030015<input type="hidden"
name="omorderdeliverheaderv.list.deliver_code" value="LL202307030015"></td>
<td style="width:50px;">已发货<input type="hidden" name="omorderdeliverheaderv.list.status" value="2">
</td>
<td>0100527<input type="hidden" name="omorderdeliverheaderv.list.vendor_code" value="0100527"></td> <td>YH20976</td>
<td>2023-07-03 00:00:00<input type="hidden" name="omorderdeliverheaderv.list.deliver_date"
value="2023-07-03 00:00:00"></td>
<td><input type="hidden" name="omorderdeliverheaderv.list.receive_date" value=""><input
type="hidden" name="omorderdeliverheaderv.list.header_id" value="123214"><input
type="hidden" name="omorderdeliverheaderv.list.vendor_id" value="7425"><input type="hidden"
name="omorderdeliverheaderv.list.sheet_type_id" value="2045"><input type="hidden"
name="omorderdeliverheaderv.list.address" value="*"><input type="hidden"
name="omorderdeliverheaderv.list." value="0"><input type="hidden"
name="omorderdeliverheaderv.list.." value="0"><input type="hidden"
name="omorderdeliverheaderv.list.header_id.k" value="123214"></td>
</tr>
<br>
<tr id="2" class="R3">
<td id="_i_" style="text-align:center;width:20px;">3</td>
<td style="text-align:center;width:20px;"><span><input type="hidden"
name="_s_omorderdeliverheaderv.list" value="0"><input type="checkbox"></span></td>
<td style="width:50px;"><a
href="../om/omorderdeliverlinesv.do?m=s&omorderdeliverheaderv.form.header_id=123214">查看</a>
</td>
<td style="width:50px;"><a
href="../om/omorderdeliverlinesv.do?m=e&omorderdeliverheaderv.form.header_id=123214">修改</a>
</td>
<td style="width:125px;">LL202307030015<input type="hidden"
name="omorderdeliverheaderv.list.deliver_code" value="LL202307030015"></td>
<td style="width:50px;">已发货<input type="hidden" name="omorderdeliverheaderv.list.status" value="2">
</td>
<td>0100527<input type="hidden" name="omorderdeliverheaderv.list.vendor_code" value="0100527"></td> <td>YH20976</td>
<td>2023-07-03 00:00:00<input type="hidden" name="omorderdeliverheaderv.list.deliver_date"
value="2023-07-03 00:00:00"></td>
<td><input type="hidden" name="omorderdeliverheaderv.list.receive_date" value=""><input
type="hidden" name="omorderdeliverheaderv.list.header_id" value="123214"><input
type="hidden" name="omorderdeliverheaderv.list.vendor_id" value="7425"><input type="hidden"
name="omorderdeliverheaderv.list.sheet_type_id" value="2045"><input type="hidden"
name="omorderdeliverheaderv.list.address" value="*"><input type="hidden"
name="omorderdeliverheaderv.list." value="0"><input type="hidden"
name="omorderdeliverheaderv.list.." value="0"><input type="hidden"
name="omorderdeliverheaderv.list.header_id.k" value="123214"></td>
</tr> </tbody>
</table>
</div>
3.JavaScript代码
function getYuan() {
//获取所有已选中元素序列
var spans = document.querySelectorAll('input[type="checkbox"]:checked');
var str = ""
//遍历元素序列
for (var i = 0; i < spans.length; i++) {
//获取父节点
var s = spans[i].parentNode;
//获取最近的祖先元素 tr
var trElement = s.closest('tr');
//是否获取到tr
if (trElement)
{
//获取当前tr下面所有td元素
var tdElements = trElement.querySelectorAll('td');
//遍历td元素
for(var j=0;j<tdElements.length;j++)
{
//获取特定元素
var inputElement=tdElements[j].querySelector("input[name='omorderdeliverheaderv.list.header_id']")
if (inputElement)
{
var value = inputElement.value;
//赋值
if (str == "")
{
str = str + value
}
else
{
str = str + "," + value
}
}
}
}
}
//显示元素的value
alert(str)
}
以上采用的是循环遍历的方式实现
获取input[type="checkbox"]:checked 所在tr中特定元素的更多相关文章
- input type=checkbox checked disabled
input type=checkbox checked disabled 禁用无法提交!
- jquery 获取 input type radio checked的元素
.find('input:radio:checked'):.find("input[type='radio']:checked");.find("input[name=' ...
- 关于input 的选中，自定义input[type="checkbox"]样式
1.css 呈现 选中后 的input的样式可以用 /*背景图*/ background:url('../pc/images/archives/icon_choosed.png') no ...
- 自定义input[type="checkbox"]的样式
对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...
- 定制 input[type="radio"] 和 input[type="checkbox"] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- 原生javascript自定义input[type=checkbox]效果
2018年6月27日 更新 能用css3,就不用js 用纯css3实现样式重写 <!DOCTYPE html> <html lang="en"> < ...
- 自定义input[type="checkbox"]样式
input[type=checkbox] { visibility: hidden; position: relative;} input[type=checkbox]:after { content ...
- 如何在 messager/alert/confirm等消息提示框中 获取 / 设置 嵌入 html内容中的 input[type=checkbox]等的选中状态?
总结, 有3点: 不能/不要 在 这些消息框 / 提示框/ 对话框中的 回调函数中去写代码: 获取嵌入 内容中input.checkbox的选中状态, 因为 虽然在这些框存在的时候, 这个 check ...
- <input type="radio" >与<input type="checkbox">值得获取
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
随机推荐
- 设计模式学习-使用go实现解释器模式
解释器模式 定义 优点 缺点 适用范围 代码实现 参考 解释器模式 定义 解释器模式(interpreter):给定一种语言,定义它的文法的一种表示,并定一个解释器,这个解释器使用该表示来解释语言中的 ...
- 小白学k8s(1)二进制部署k8s
二进制部署k8s 前言 准备工作 关闭防火墙 关闭 swap 分区 关闭 SELinux 更新系统时间 秘钥免密码 设置主机名称 服务器角色 安装etcd 创建证书 生成证书 部署Etcd 在Node ...
- NLP专栏简介：数据增强、智能标注、意图识别算法|多分类算法、文本信息抽取、多模态信息抽取、可解释性分析、性能调优、模型压缩算法等
NLP专栏简介:数据增强.智能标注.意图识别算法|多分类算法.文本信息抽取.多模态信息抽取.可解释性分析.性能调优.模型压缩算法等 专栏链接:NLP领域知识+项目+码源+方案设计 订阅本专栏你能获得什 ...
- C/C++ 类与构造析构等知识
简单定义类 #include <iostream> #include <string> using namespace std; class Student { public: ...
- 常见的WCF面试问题
WCF和ASMX WebService的区别是什么? 最基本的区别在于,ASMX或者ASP.NET WebService是用来通过基于HTTP的SOAP来实现通讯.但WCF可以使用任意协议(HTTP, ...
- typescript json 转 bean
3个文件: 1.UserInfoGetResponse.ts class UserInfoGetResponse{ private userId: number; private userName: ...
- .NET 云原生架构师训练营（RGCA 四步架构法）--学习笔记
RGCA Requirement:从利益相关者获取需求 Goal:将需求转化为目标(功能意图) Concept:将目标扩展为完整概念 Architecture:将概念扩展为架构 目录 从利益相关者获取 ...
- ASP.NET Core分布式项目实战（oauth2 + oidc 实现 server部分）--学习笔记
任务15:oauth2 + oidc 实现 server部分 基于之前快速入门的项目(MvcCookieAuthSample): https://www.cnblogs.com/MingsonZhen ...
- Spark相关面试题
Spark Core面试篇01 一.简答题 1.Spark master使用zookeeper进行HA的,有哪些元数据保存在Zookeeper? 答:spark通过这个参数spark.deploy.z ...
- NC51189 Mondriaan's Dream
题目链接 题目 题目描述 Squares and rectangles fascinated the famous Dutch painter Piet Mondriaan. One night, a ...