在前端动态表格的开发场景中，经常需要在每一行中嵌入下拉框组件，当用户操作下拉框时，需要同时拿到下拉框自身的ID和当前所在行的ID，用于后续的数据处理或者接口请求。接下来就详细讲解实现这一功能的具体方法。
实现思路梳理
要实现获取选中下拉框ID和对应行ID，核心逻辑可以分为三步：
- 动态生成表格时，为每一行和行内的下拉框设置唯一的标识属性，比如自定义属性
data-row-id和id - 给下拉框绑定
change事件，当选项变化时触发回调函数 - 在事件回调中，通过当前触发事件的下拉框元素，向上遍历找到父级行元素，再分别获取下拉框的ID和行的标识属性
完整代码示例
HTML结构准备
先准备基础的表格容器，后续通过JavaScript动态插入行：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态表格获取下拉框和行ID</title>
</head>
<body>
<button id="addRowBtn">添加表格行</button>
<table id="dynamicTable" border="1" style="margin-top:10px;width:500px;">
<thead>
<tr>
<th>行ID</th>
<th>下拉选择</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 动态行会插入到这里 -->
</tbody>
</table>
<script src="index.js"></script>
</body>
</html>
JavaScript逻辑实现
下面的代码实现了动态添加表格行，以及获取选中下拉框ID和对应行ID的功能：
// 行计数器，用于生成唯一的行ID
let rowCount = 1;
// 下拉框计数器，用于生成唯一的下拉框ID
let selectCount = 1;
// 获取添加行按钮和表格tbody
const addRowBtn = document.getElementById('addRowBtn');
const tableBody = document.getElementById('dynamicTable').getElementsByTagName('tbody')[0];
// 添加行的点击事件
addRowBtn.addEventListener('click', function() {
// 生成当前行的唯一ID
const currentRowId = 'row_' + rowCount;
// 生成当前下拉框的唯一ID
const currentSelectId = 'select_' + selectCount;
// 创建新的表格行
const newRow = document.createElement('tr');
// 给行设置自定义属性存储行ID
newRow.setAttribute('data-row-id', currentRowId);
// 第一列：显示行ID
const rowIdCell = document.createElement('td');
rowIdCell.textContent = currentRowId;
newRow.appendChild(rowIdCell);
// 第二列：创建下拉框
const selectCell = document.createElement('td');
const selectEl = document.createElement('select');
// 设置下拉框ID
selectEl.id = currentSelectId;
// 给下拉框设置自定义属性存储所在行ID，方便后续获取
selectEl.setAttribute('data-row-id', currentRowId);
// 添加下拉框选项
const option1 = document.createElement('option');
option1.value = '1';
option1.textContent = '选项一';
const option2 = document.createElement('option');
option2.value = '2';
option2.textContent = '选项二';
const option3 = document.createElement('option');
option3.value = '3';
option3.textContent = '选项三';
selectEl.appendChild(option1);
selectEl.appendChild(option2);
selectEl.appendChild(option3);
// 绑定下拉框change事件
selectEl.addEventListener('change', function(e) {
// 获取当前触发事件的下拉框元素
const targetSelect = e.target;
// 获取下拉框自身的ID
const selectId = targetSelect.id;
// 获取下拉框所在行的ID，这里可以通过自定义属性获取，也可以向上找父级tr
// 方法一：通过自定义属性获取
const rowId = targetSelect.getAttribute('data-row-id');
// 方法二：向上遍历DOM获取父级tr的标识
// const parentRow = targetSelect.closest('tr');
// const rowId = parentRow.getAttribute('data-row-id');
console.log('选中的下拉框ID：', selectId);
console.log('对应的行ID：', rowId);
alert('下拉框ID：' + selectId + '，所在行ID：' + rowId);
});
selectCell.appendChild(selectEl);
newRow.appendChild(selectCell);
// 第三列：删除行按钮
const actionCell = document.createElement('td');
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '删除行';
deleteBtn.addEventListener('click', function() {
newRow.remove();
});
actionCell.appendChild(deleteBtn);
newRow.appendChild(actionCell);
// 把新行插入表格
tableBody.appendChild(newRow);
// 计数器自增
rowCount++;
selectCount++;
});
关键点说明
在实际开发中，有两个点需要特别注意：
- 如果动态表格的行是后续通过接口数据渲染的，只需要在渲染每一行的时候，按照上面的逻辑给行和下拉框设置对应的标识属性即可，事件绑定可以通过事件委托的方式优化，避免重复绑定大量事件
- 如果表格行可能被动态删除，不需要额外处理ID的回收，只要保证新增的时候ID唯一即可，不会影响功能逻辑
通过上述方法，就可以稳定地获取到动态表格行中选中下拉框的ID和对应行的ID，满足后续的业务开发需求。
JavaScript动态表格下拉框ID行ID前端交互修改时间：2026-06-08 11:02:11