如何用jQuery获取动态复杂表格Segment列输入框值？点击事件取值失败

我修改了逻辑，为表格每行添加按钮并绑定点击事件，但在点击函数中无法通过val()获取Segment字段的值，控制台输出为空。

代码如下：

function generateSetDefaultSegmentValueButton(){
    $('#cust_segment_rules_sublist_default_splits tr').each(function(){
        let lineIndex = this.id.replace('cust_segment_rules_sublist_default_row_','');
        $(this).find("td:contains('Button')").each(function(){
            $(this).html('<button type="button" id="col_default_value_button_line_' + lineIndex + '" style = "cursor: pointer;" >Select defaul segment value</button>');
            $(`#col_default_value_button_line_${lineIndex}`).on("click", {arg1: `${lineIndex}`} ,onDefaultSegmentClick);
        })
    })
}

function onDefaultSegmentClick(e){
    let lineIndex = e.data.arg1;
    let segmentName =  $(`#cust_segment_rules_sublist_default_row_${lineIndex} td:nth-child(8) div`).val()
    console.log("segmentName: " + segmentName)
}

问题分析与解决方法 #

1. DOM元素定位错误
   你当前的选择器td:nth-child(8) div直接调用了div的val()方法，但div不是表单元素，本身没有这个方法。Segment列的输入值实际存储在div内部的<input>、<select>等表单元素中。

2. 修正选择器
   打开浏览器开发者工具，查看该行Segment列的DOM结构，找到承载值的表单元素，修改选择器：

   // 假设是div内的input元素
   let segmentName = $(`#cust_segment_rules_sublist_default_row_${lineIndex} td:nth-child(8) div input`).val();
   

3. 优化选择器可靠性
   避免依赖nth-child(8)这种易因列顺序变化失效的选择器，如果Segment列的td有专属类名（比如segment-column），可以改用：

   let segmentName = $(`#cust_segment_rules_sublist_default_row_${lineIndex} .segment-column input`).val();
   

4. 排查元素是否存在
   可以先打印目标元素，确认选择器是否正确命中：

   function onDefaultSegmentClick(e){
       let lineIndex = e.data.arg1;
       let $target = $(`#cust_segment_rules_sublist_default_row_${lineIndex} td:nth-child(8) div input`);
       console.log("目标元素：", $target);
       if ($target.length) {
           let segmentName = $target.val();
           console.log("segmentName: " + segmentName);
       } else {
           console.log("未找到Segment列的输入元素");
       }
   }
   

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