如何在select的onChange事件中获取子表格内输入框的值？

嘿，我来帮你搞定这个问题！你的需求很明确：当外层表格里的下拉框（.dom_bankselestion）触发change事件时，获取tfoot中子表格内输入框（.dom_analysismonthyear）的值并弹出。下面我给你两种实用的实现方式，jQuery和原生JavaScript都有，你可以根据项目情况选择：

jQuery 实现方案 #

这种方式代码简洁，适合已经引入jQuery的项目：

// 给下拉框绑定change事件
$('.dom_bankselestion').on('change', function() {
  // 从当前下拉框出发，先找到最外层的父表格，再定位到目标输入框
  const inputValue = $(this)
    .closest('.order-list-bank-detail') // 锁定当前下拉框所属的外层表格
    .find('.dom_analysismonthyear')     // 在该表格内查找目标输入框
    .val();
  
  // 弹出输入框的值
  alert(inputValue);
});

关键点说明：

• 使用closest('.order-list-bank-detail')是为了精准锁定当前下拉框所在的外层表格，避免页面存在多个同类表格时，错误获取其他表格的输入框值。
• find方法可以直接在锁定的表格范围内查找目标元素，逻辑清晰且高效。

原生JavaScript 实现方案 #

如果你的项目没有引入jQuery，用原生JS同样能轻松实现：

// 获取页面上的下拉框元素
const selectBox = document.querySelector('.dom_bankselestion');

// 给下拉框添加change事件监听
selectBox.addEventListener('change', function() {
  // 向上查找最近的外层表格
  const outerTable = this.closest('.order-list-bank-detail');
  // 在该表格内找到目标输入框
  const inputBox = outerTable.querySelector('.dom_analysismonthyear');
  
  // 弹出输入框的值
  alert(inputBox.value);
});

关键点说明：

• 原生JS的Element.closest()方法和jQuery的closest作用一致，都是向上遍历DOM树找到匹配的最近父元素。
• querySelector用于在指定元素范围内查找目标，确保只获取当前表格内的输入框。

如果你的页面存在多个这样的嵌套表格，上面两种方案都能正确对应到当前下拉框所属表格的输入框，不会出现混淆的情况哦～

内容的提问来源于stack exchange，提问作者softboxkid