如何在选中复选框时逐行获取Td值
在选中复选框时逐行获取Td值，可以通过以下步骤实现：
- 首先，给每个复选框元素添加一个事件监听器，监听复选框的点击事件。
- 在事件监听器中，获取当前被点击的复选框元素。
- 使用DOM遍历方法，如parentNode、previousSibling等，获取该复选框所在行的tr元素。
- 在tr元素中，使用DOM遍历方法获取所有的td元素。
- 遍历td元素集合，获取每个td元素的文本内容。
- 将获取到的td值存储到一个数组或其他数据结构中，以便后续使用。
下面是一个示例代码，演示了如何实现上述功能：
<!DOCTYPE html>
<html>
<head>
<title>获取选中复选框的行的Td值</title>
</head>
<body>
<table>
<tr>
<th></th>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>值1</td>
<td>值2</td>
<td>值3</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>值4</td>
<td>值5</td>
<td>值6</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>值7</td>
<td>值8</td>
<td>值9</td>
</tr>
</table>
<script>
// 获取所有的复选框元素
var checkboxes = document.querySelectorAll('.checkbox');
// 给每个复选框元素添加事件监听器
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('click', function() {
// 获取当前被点击的复选框元素
var currentCheckbox = this;
// 获取复选框所在行的tr元素
var row = currentCheckbox.parentNode.parentNode;
// 获取行中所有的td元素
var tds = row.querySelectorAll('td');
// 存储获取到的td值
var tdValues = [];
// 遍历td元素集合，获取每个td元素的文本内容
tds.forEach(function(td) {
tdValues.push(td.textContent);
});
// 输出获取到的td值
console.log(tdValues);
});
});
</script>
</body>
</html>在上述示例代码中，我们使用了querySelectorAll方法获取所有的复选框元素，并使用forEach方法给每个复选框元素添加了点击事件监听器。在事件监听器中，我们通过DOM遍历方法获取了复选框所在行的tr元素，并进一步获取了该行中所有的td元素。然后，我们遍历td元素集合，获取每个td元素的文本内容，并将其存储到一个数组中。最后，我们输出了获取到的td值。
请注意，上述示例代码中并未提及任何特定的云计算品牌商或产品，如需了解腾讯云相关产品和产品介绍，建议访问腾讯云官方网站或咨询腾讯云官方客服。
相关·内容
3回答
如果复选框被选中，我尝试逐行获取TD值。下面是我的HTML表格格式。value="12"></td> <td>Accountant</td>
浏览 12提问于2016-07-20得票数 1
回答已采纳
2回答
目前我在MVC4 web应用程序上工作，我需要从网页的多个复选框中获取选中或未选中的值。这是我在视图中要呈现的复选框的代码。@foreach (var Leave in Model) <tr class="Row"> @Html.CheckBox("leaves")
浏览 2提问于2014-03-09得票数 0
在AngularJS中，如何在两个复选框之间切换并仅获取一个值 <input type="checkbox" value="{{person.person_ID}}">{{person.home_address}}<td >
<input type="checkbox" value="{{person.p
浏览 1提问于2014-07-07得票数 1
如何在razor视图引擎中从动态创建的复选框列表中找到复选框的值(即是否选中)？代码运行如下...@foreach (var item in Model)) <tr> @Html.ActionLink(item.Title, "Edit", new { id = item.id})
</
浏览 2提问于2011-06-17得票数 1
回答已采纳
2回答
我正在尝试获取复选框的值，以便稍后将它们插入数据库中。未选中的复选框不会发送到我的servlet也没问题，但当我选中多个复选框时，它会返回我在JSP中执行的第一个复选框： Syst
浏览 2提问于2010-05-13得票数 1
回答已采纳
4回答
当未选中复选框时，我尝试获取复选框的值，但只有选中复选框时，才会得到复选框的值，有人能帮我吗？当$row2被选中时，我需要它的值，如果没有检查，我需要使用它的值，给我“未参与”。while ($row = mysqli_fetch_array($result)) echo
浏览 9提问于2016-10-13得票数 1
3回答
同时获取复选框id和值
、、、
我想知道如何同时获得ID分配给它的复选框的值。<table class="data" cellpadding="0" cellspacing="0"><input type='hidden' name='product_id' value='".</script>");我不断得到的ID结果是数据库中
浏览 2提问于2012-07-27得票数 0
当我单击复选框时，我正在尝试获取复选框的名称(name conatins唯一ids )和当前值(DefaultChecked包含"true“或”false“值 <td style={styles.gridrowthis.state.items.map((itm) => { <>
<<
浏览 33提问于2021-09-27得票数 0
回答已采纳
3回答
<tr> <input type="checkbox" id="box1" name="box1" <% if (renderRequest.getPreferences().getValue("box1", null).equals("on")) { %> checked="checked" <% } %> >
</td
浏览 1提问于2012-08-05得票数 0
3回答
我有一个javascript，当复选框被选中时，它需要获取复选框的值，当复选框未被选中时，它需要忽略它的值。现在，我使用以下命令获取复选框的值：当您选中该框并提交表单时，它会起作用，但如果您取消选中</em
浏览 0提问于2011-07-07得票数 0
回答已采纳
我有一个jquery，它有多个行，其中包含复选框和文本输入字段。我的目标是选择选中复选框的所有行，并通过ajax提交它们。我能够获得选中的所有复选框的"id“属性，但是如何获取行其余部分中列的值(标签和文本输入)？<td>Stud
浏览 4提问于2015-05-15得票数 0
回答已采纳
2回答
有没有办法通读HTML页面并返回所单击的动态复选框的值？现在，我知道如何在不使用JS的情况下从静态复选框中获取值，但由于我是使用数据库中的数据生成以下复选框，因此我不确定如何定位每个复选框并知道用户选中了哪个复选框。当我浏览chrome中的开发人员工具时，我可以看到生成的复选框的值发生了变化，但当我引用它们时，它仍然不起作用。
<![type="c
浏览 58提问于2017-07-18得票数 1
回答已采纳
<td>N1</td> <tr class="cc"> <td>N1</td>exclude" value="progress">
DD<input type="
浏览 5提问于2015-12-31得票数 0
在我的数据中，我有一个布尔值要显示在表中。我把它表示为复选框。如何使此复选框显示值(选中/未选中)？td> {{item?.groupsAccess}}</td> <td</e
浏览 2提问于2017-08-16得票数 0
回答已采纳
如何在选中两个输入框时启用其同级复选框，并在未选中其同级复选框时禁用它们。选中复选框时，更新或修改后的行值应存储在这三个变量values[] - db id (不可更改)、comp[] -以存储组件值、plans[] -以存储计划。未选中时，应弹出存储的3个值。="text" value="John
浏览 0提问于2018-07-03得票数 1
回答已采纳
2回答
我已经绑定了中继器，我想在选中特定复选框时获取标签的值：$(function() { console.logasp:Label ID="lblno" CssClass="nameLabel" runat="server" Text='<%#Eval("no")%>'><&
浏览 0提问于2016-10-12得票数 0
列在每一行中都有复选框。到目前为止，在呈现复选框时，我可以通过StoreController.php检查或取消复选框。然后，我检查或取消选中一些复选框以更改状态。并提交表格。看起来，未选中复选框的值未被考虑在内。我应该如何修复这个问题以获得所有复选框的复选状态。
<td><div style=&quo
浏览 2提问于2020-10-22得票数 0
回答已采纳
= null}"> <td><input type="checkbox" name="categoryType" id="categoryTypeCB" class="categoryTypeCB" value="${i}"> ${i}</td> </g:
浏览 0提问于2012-09-18得票数 0
回答已采纳
2回答
我正在尝试创建一个modify users表单，其中有两个复选框，用于确定用户是否为管理员或是否处于活动状态。我让它读取数据库并选中相应的复选框，但是当我试图从用户表单获取要更新的值时，数据库只返回一个值。 $displaytable = $displaytable."
浏览 0提问于2015-11-04得票数 0
2回答
我正在尝试从jsp页面访问多个复选框值。<td><spring:label path="employeeId">${employee.employeeId}</spring:label></td><td><spring:label path="employeeName">${employee.employeeName}</spring:label><
浏览 6提问于2012-05-24得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
