本教程详细阐述了如何在JavaScript中高效获取动态添加的表格行中，下拉选择框（select）的选中值及其所属行（tr）的唯一ID。通过使用onchange事件监听、this关键字引用当前元素，并结合closest()方法向上查找父级行ID，本文提供了一套清晰且可复用的解决方案，确保在复杂动态表格场景下数据交互的准确性与便捷性。
在现代web应用开发中，动态生成表格行并对其内部的交互元素（如下拉选择框）进行数据监听和处理是一个常见的需求。例如，在一个采购订单界面中，用户可能需要动态添加多行商品，并在每一行中选择商品。当某个商品的下拉选择框值发生变化时，我们通常需要获取该选择框的选中值以及它所属的表格行的唯一标识，以便将这些信息发送到后端控制器进行进一步处理。
动态表格行的构建与下拉框初始化
首先，我们需要一个机制来动态地向HTML表格中添加新的行。为了确保每行及其内部元素的唯一性，通常会使用一个计数器来生成动态ID。
| 序号 | 商品 | 数量 | 库存 | 单价 | 总价 | 操作 |
|---|
在JavaScript中，我们可以定义一个函数来生成包含所有列内容的HTML字符串，这样可以提高代码的可读性和维护性。同时，为了填充下拉选择框，可以预先定义一个选项数据源，并编写一个辅助函数来生成这些选项的HTML。
// 模拟下拉框选项数据var dropdownOptions = [{ Text: "商品A", Value: "101" }, { Text: "商品B", Value: "102" }, { Text: "商品C", Value: "103" }];var counter = 1; // 行计数器，用于生成唯一ID// 辅助函数：生成下拉框选项的HTMLfunction populateDropdownOptions() { var optionsHtml = ""; dropdownOptions.forEach(function(option) { optionsHtml += '' + option.Text + ''; }); return optionsHtml;}// 每行内容的模板字符串，包含动态ID和事件监听var rowContentTemplate = function(currentCounter) { return "" + '" + " " + '' + ' ' + populateDropdownOptions() + "" + " " + '' + '' + " " + '' + '' + " " + '' + '' + " " + '' + '' + " " + "" + '' + " ";};$(function() { $("#add").click(function() { // 使用模板生成当前行的内容 var currentRowHtml = rowContentTemplate(counter); // 创建新行，赋予唯一ID，并追加到表格 $('' + currentRowHtml + " ").appendTo("#submissionTable tbody"); counter++; // 递增计数器 return false; // 阻止默认行为 });});// 模拟删除行的函数function removeTr(rowId) { console.log("移除行ID:", rowId); $("#tableRow_" + rowId).remove();}
在上述代码中，我们做了以下改进：
将下拉框的选项数据独立出来，并创建了 populateDropdownOptions() 函数来生成选项HTML，提高了复用性。将每行的HTML内容定义为一个函数 rowContentTemplate(currentCounter)，它接受当前的计数器作为参数，以便正确地生成包含唯一ID的元素。在 元素中直接添加了 onchange=”sendInfo(this)” 事件监听器。
获取选中值及对应行ID
核心问题是如何在 select 元素的值发生变化时，获取其选中值以及它所属的
元素的ID。这可以通过 onchange 事件和JavaScript的DOM操作方法实现。
立即学习“Java免费学习笔记（深入）”；
当 select 元素的 onchange 事件被触发时，我们调用 sendInfo(this) 函数。这里的 this 关键字非常关键，它指向了触发事件的那个 select 元素本身。
在 sendInfo 函数中，我们可以利用 this（在函数参数中通常命名为 e 或 element）：
获取选中值： e.value 直接获取 select 元素的当前选中值。获取 select 元素的 name 属性： e.name 可以获取 select 元素的 name 属性，这在提交表单数据时非常有用。获取所属行ID： e.closest(“tr”).id 是获取父级行ID的关键。closest(“tr”) 方法会向上遍历DOM树，查找最近的 祖先元素，然后我们就可以通过 .id 属性获取其ID。
// 当下拉框值改变时触发的函数function sendInfo(e) { // e 指代触发事件的 元素 var selectedValue = e.value; // 获取选中值 var selectName = e.name; // 获取 元素的name属性 // 使用 closest() 方法向上查找最近的 元素，并获取其ID var rowId = e.closest("tr").id; console.log("选中值 (Value):", selectedValue); console.log("下拉框名称 (Name):", selectName); console.log("所属行ID (Row ID):", rowId); // todo: 在此处将数据发送到后端控制器 // 例如，使用 jQuery.ajax 或 fetch API // $.ajax({ // url: '/your-controller/action', // type: 'POST', // data: { // rowId: rowId, // itemId: selectedValue // }, // success: function(response) { // console.log('数据发送成功', response); // }, // error: function(error) { // console.error('数据发送失败', error); // } // });}
完整示例代码
以下是整合了所有功能的完整代码示例，包括HTML结构和JavaScript逻辑：
动态表格行选中值获取 table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } .form-select, .form-control { width: 100%; padding: 5px; box-sizing: border-box; } .btn-danger { background-color: #dc3545; color: white; border: none; padding: 5px 10px; cursor: pointer; }
序号 商品 数量 库存 单价 总价 操作
// 模拟下拉框选项数据 var dropdownOptions = [{ Text: "商品A", Value: "101" }, { Text: "b", Value: "102" }, { Text: "c", Value: "103" } ]; var counter = 1; // 行计数器，用于生成唯一ID // 辅助函数：生成下拉框选项的HTML function populateDropdownOptions() { var optionsHtml = ""; dropdownOptions.forEach(function(option) { optionsHtml += '' + option.Text + ''; }); return optionsHtml; } // 每行内容的模板字符串，包含动态ID和事件监听 var rowContentTemplate = function(currentCounter) { return "" + '" + " " + '' + ' ' + populateDropdownOptions() + "" + " " + '' + '' + " " + '' + '' + " " + '' + '' + " " + '' + '' + " " + "" + '' + " "; }; $(function() { $("#add").click(function() { // 使用模板生成当前行的内容 var currentRowHtml = rowContentTemplate(counter); // 创建新行，赋予唯一ID，并追加到表格 $('' + currentRowHtml + " ").appendTo("#submissionTable tbody"); counter++; // 递增计数器 return false; // 阻止默认行为 }); }); // 模拟删除行的函数 function removeTr(rowId) { console.log("移除行ID:", rowId); $("#tableRow_" + rowId).remove(); } // 当下拉框值改变时触发的函数 function sendInfo(e) { // e 指代触发事件的 元素 var selectedValue = e.value; // 获取选中值 var selectName = e.name; // 获取 元素的name属性 // 使用 closest() 方法向上查找最近的 元素，并获取其ID var rowId = e.closest("tr").id; console.log("选中值 (Value):", selectedValue); console.log("下拉框名称 (Name):", selectName); console.log("所属行ID (Row ID):", rowId); // todo: 在此处将数据发送到后端控制器 // 例如，使用 jQuery.ajax 或 fetch API }
注意事项与总结
唯一ID的重要性： 在动态生成HTML元素时，为每个可交互的元素（如 , , ) 分配唯一的ID至关重要。这不仅有助于JavaScript精确地定位和操作元素，也避免了ID冲突导致的意外行为。本教程通过 counter 变量和字符串拼接实现了这一点。onchange 事件： 对于 select 元素，onchange 事件是监听其值变化的最佳方式。直接在HTML中绑定 onchange=”functionName(this)” 是一种简洁有效的方法，尤其适用于动态生成的元素。this 关键字： 在事件处理函数中，this 关键字指向触发该事件的DOM元素。利用这一点，我们可以直接访问该元素的属性（如 value, name）。closest() 方法： Element.closest() 方法是一个非常实用的DOM遍历方法。它从当前元素开始，沿着DOM树向上查找，返回与指定选择器匹配的最近的祖先元素。这比使用 parentNode 多次查找更加高效和健壮。代码可读性与维护： 将重复的HTML结构（如行内容）封装成变量或函数，可以显著提高代码的可读性和未来的维护性。
通过遵循本教程中介绍的方法，您将能够高效且准确地在动态生成的表格行中获取下拉选择框的选中值及其所属行的唯一ID，从而为您的Web应用程序实现更强大的交互功能。
以上就是JavaScript动态表格行中获取选中下拉框ID及对应行ID的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525108.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
关于作者
相关推荐
-
快兔网盘下载文件失败怎么办_快兔网盘下载失败问题排查
下载失败通常由网络、软件或设备设置引起。先检查Wi-Fi或切换数据网络，重启路由器；更新快兔网盘至v1.1.38版，清除缓存或重装应用；确保手机有足够存储空间并授予App存储权限；核对下载路径设置。若问题仍存，可能是服务器问题，建议稍后重试或联系客服。 快兔网盘下载文件失败，通常和网络、软件状态或设…
-
一款超级经典复古的 Windows 9x 主题风格 Avalonia UI 控件库，满满的回忆杀！
前言 今天为大家带来一款极具情怀的复古风 windows 9x 主题 avalonia ui 控件库——classic.avalonia，带你一秒穿越回经典的桌面时代，满满的回忆扑面而来。 项目介绍 Classic.Avalonia 是一个基于 .NET 的开源（MIT 许可证）UI 控件库，专为还…
-
高德导航如何下载安装_高德导航下载安装的详细步骤
首先需下载安装高德地图才能使用导航功能。通过App Store搜索“高德地图”，确认开发者后点击获取安装；或通过豌豆荚等平台下载官方APK，开启未知来源权限后安装；还可扫描官网二维码快速下载安装。 如果您尝试在手机上使用高德地图导航，但尚未安装该应用，则无法正常使用路线规划与语音导航功能。以下是完成…
-
笔记本电脑中病毒了一直下软件怎么办
在日常使用笔记本电脑时，如果误下载了来源不明的病毒文件，可能会导致电脑感染病毒，进而出现频繁自动下载软件的问题。那么，当电脑中了病毒并且不停地下载软件时，该如何处理呢？接下来就为大家详细介绍具体的解决办法。 工具/原料： 系统版本：Windows 7系统 设备型号：笔记本电脑 软件版本：小白一键重装…
-
红果漫剧夜间模式在哪里开启_红果漫剧夜间模式设置方法
开启红果漫剧夜间模式可减少夜间阅读对眼睛的刺激，具体方法有三种：一、在阅读界面轻触屏幕调出菜单，点击“夜间模式”按钮即可切换；二、进入“我的”-“设置”-“阅读设置”，开启“夜间模式”并可设置定时启用；三、部分安卓设备可通过下拉通知栏开启系统深色模式，并确保App允许“跟随系统主题”以实现自动同步。…
-
顺丰同城骑士app如何退保证金
在顺丰同城骑士平台，如果你打算停止接单并申请退还保证金，可以参考以下流程进行操作。 第一步，启动顺丰同城骑士App。登录后，在首页底部的导航栏中找到“我的”入口，点击进入个人账户页面。 进入“我的”页面后，请留意页面中的功能选项，通常会有一个明确标注为“保证金”的功能模块。 点击“保证金”选项，进入…
-
哔哩哔哩大会员专属功能在哪开启_B站会员专属功能开启指南
开启B站大会员功能需依次设置：一、在“观看偏好”中设定清晰度为1080P+或自适应，开启自动跳过片头片尾及杜比全景声；二、在“隐私权限设置”中关闭个性化广告推荐，并于“播放设置”开启免广告播放；三、在“我的装扮”中领取大会员专属头像框、挂件并使用特效弹幕；四、在“账号与安全”中开启数据同步，实现多端…
-
b站视频怎么循环播放_B站视频单曲循环播放设置技巧
B站视频循环播放可通过三种方式实现：一是使用App内播放器的循环功能，点击进度条右侧循环图标即可；二是通过第三方播放器如VLC导入视频链接并开启循环模式；三是PC端利用浏览器扩展插件如Global Speed，启用Loop Video选项实现自动重播。 如果您希望在观看B站视频时实现循环播放，以便重…
-
聊聊flink Table的Group Windows
本文旨在探讨flink table的group windows。 Table table = input .window([Window w].as(“w”)) // 定义窗口并为其赋予别名 w .groupBy(“w”) // 按窗口 w 分组表 .select(“b.sum”); // 聚合Ta…
-
如何在Java中使用LinkedHashSet
LinkedHashSet继承HashSet并保持插入顺序，适用于去重且需顺序的场景。1. 创建时可指定初始容量；2. add()添加元素，自动去重；3. 遍历时按插入顺序输出；4. 支持remove()、contains()等操作；5. 常用于关键词去重、缓存等。注意：允许null、非线程安全。 …
-
Swoole怎么给WebSocket连接设置别名或用户ID
使用fd与用户ID的映射表可实现Swoole中WebSocket按用户推送消息，通过全局数组或SwooleTable存储fd↔uid对应关系，在用户登录时绑定，断开时解绑，结合Redis支持多进程或多机部署。 在使用 Swoole 开发 WebSocket 服务时，经常需要为每个连接绑定用户 ID …
-
平安好车主如何预约汽车美容服务_平安好车主预约汽车美容服务详细方法
首先打开平安好车主APP并登录，可通过首页活动入口、车主生活频道或服务预约中心三种方式进入汽车美容预约；选择所需服务项目后，选定附近门店及合适时间提交即可完成预约。 如果您想为您的爱车预约美容服务，但不确定如何在平安好车主APP中操作，可以通过以下多种方式完成预约。整个过程涉及选择服务项目、查找附近…
-
Linux基本操作+命令介绍
1.Linux基本操作1.1Linux的目录结构 windows的目录结构是带有盘符的。d： e： c： 在Xterm中输入ls / 查看Linux的顶级目录。 代码语言：javascript代码运行次数：0运行复制 1. root：该目录为系统管理员HOME目录2. bin：这个目录下放着经常使用…
-
猫眼电影院取票机怎么用_猫眼影院自助取票机操作流程
首先使用二维码扫码取票最便捷，到达影院后点击取票机“取票”按钮，将购票App中的动态二维码对准扫描口，听到“滴”声后等待电影票自动吐出；若无法扫码可选择输入手机号后四位及短信验证码的方式完成取票；此外还支持手动输入14或16位订单号查询并打印电影票。 如果您在猫眼App上购买了电影票，但需要在影院现…
-
平安证券怎样设置止盈止损_平安证券APP智能条件单设置
可通过平安证券APP的智能条件单实现自动买卖，具体包括：一、价格条件单，设定目标价触发买卖，登录APP后进入交易页面选择“价格条件单”，输入证券代码并设置高于或低于当前价的条件，完成委托信息后提交；二、回落卖出条件单，适用于上涨行情中锁定收益，进入“智能工具”选择“回落卖出”，设定回落幅度与卖出数量…
-
高德鹰眼预警开启后电池消耗加快_高德鹰眼预警开启后电池消耗优化
开启高德地图“鹰眼守护”后电池消耗加快，可通过调整运行模式、优化定位策略和启用省电功能缓解。1、将“高性能模式”改为“节能模式”，关闭非必要预警类型；2、定位模式设为“仅设备”或“省电模式”，允许后台活动并关闭位置记录；3、开启低电量动画关闭、智能预警间隔，关闭语音播报与AR导航，并定期清理缓存，有…
-
JVM内存与垃圾回收篇第11章直接内存
第 11 章 直接内存 1、直接内存概述 直接内存不属于虚拟机运行时数据区的一部分，也不是《java虚拟机规范》中定义的内存区域。它是java堆外的、直接向系统申请的内存区间。直接内存来源于nio，通过存在堆中的directbytebuffer操作native内存。通常，访问直接内存的速度会优于ja…
-
win11便笺内容不见了怎么找回_win11便笺内容丢失恢复方法
首先检查便笺应用内的时间轴历史记录，确认是否可手动恢复删除内容；其次查看系统回收站中是否有相关便笺文件残留并尝试还原；若开启云同步，可通过Microsoft账户在其他设备或云端获取最新数据；接着在本地AppData路径下查找StickyNotes数据库文件并用SQLite工具提取内容；最后使用专业恢…
-
VSCode用户代码片段管理_VSCode自定义模板快速创建入口
VSCode通过用户代码片段和自定义模板显著提升开发效率。1. 可通过“文件 > 首选项 > 用户代码片段”为特定语言或全局创建代码片段，使用prefix触发、body定义代码结构、description标注用途。2. 合理管理需区分语言特定与全局片段，避免prefix冲突，善用desc…
-
Java中引用和实现外部.class文件定义的接口：Classpath管理详解
本文详细阐述了如何在Java项目中使用已编译的.class文件，特别是当这些文件定义了接口时。核心在于理解和正确配置Java的classpath，它指示JVM和编译器查找类和资源文件的路径。教程将通过命令行示例，指导读者如何在编译和运行时将.class文件加入classpath，从而成功引用并实现其…
