当我点击单选框的时候获取到动态生产表单的那一行值,用怎么写
时间: 2024-02-18 18:00:20 浏览: 38
您可以通过以下步骤来获取单选框所在行的值:
1. 首先,为单选框绑定 `click` 事件。
2. 在事件处理程序中,获取单选框所在的行。您可以使用 `parentNode` 属性获取单选框所在的 `<td>` 标签,然后再使用 `parentNode` 获取整个行(`<tr>` 标签)。
3. 接下来,您可以通过行的某个属性(例如 `id` 或 `class`)来识别该行,并从中获取需要的值。如果您的表格中没有为行设置属性,则可以使用 `querySelector` 或 `querySelectorAll` 方法根据行中其他元素的值来查找该行。
4. 最后,您可以将获取到的值保存到变量中,或者将其插入到其他元素中以进行显示或处理。
下面是一个示例代码,用于演示如何在单选框点击事件中获取所在行的值:
```html
<table>
<tr>
<td>1</td>
<td>John Doe</td>
<td><input type="radio" name="row1"></td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td><input type="radio" name="row2"></td>
</tr>
<tr>
<td>3</td>
<td>Bob Johnson</td>
<td><input type="radio" name="row3"></td>
</tr>
</table>
<script>
var radios = document.querySelectorAll('input[type="radio"]');
for (var i = 0; i < radios.length; i++) {
radios[i].addEventListener('click', function() {
var row = this.parentNode.parentNode; // 获取所在行
var id = row.querySelector('td:first-child').textContent; // 获取行中第一列的值
var name = row.querySelector('td:nth-child(2)').textContent; // 获取行中第二列的值
console.log('id:', id, 'name:', name);
// 将获取到的值插入到其他元素中
document.getElementById('result').textContent = '您选择了 ' + name + '(ID:' + id + ')。';
});
}
</script>
<p id="result"></p>
```
在这个示例中,我们首先获取了所有的单选框,并为它们绑定了 `click` 事件。在事件处理程序中,我们使用了 `parentNode` 属性来获取单选框所在的行,并使用 `querySelector` 方法来获取行中的其他元素值。最后,我们将获取到的值插入到了 `<p>` 元素中进行显示。