jQuery each循环遍历表格获取input值返回undefined问题

你拿不到值的核心原因有两个，全是基础写法错误：

• 选择器和DOM结构完全不匹配
  1. 你HTML里存放输入框的td类名是c1、c2，代码里写的选择器却是td.pup、td.van，类名根本对不上
  2. jQuery的.children()方法仅匹配元素的直接子节点，不支持多层后代匹配，你在children参数里写td.xxx input这种跨层级选择器本身就是方法误用，根本选不到input元素。空jQuery对象调用任何取值方法都会返回undefined。
• 输入框取值方法错误
  <input>是自闭合表单元素，没有内部文本节点，用.text()永远拿不到输入值，必须用.val()方法读取用户输入内容。

$('tr').each(function (index, element) {
    const $currentRow = $(element);
    const rowId = $currentRow.children('.identifier').first().text();
    let needSave = false;

    // 查找行内后代元素用find()，类名和HTML保持一致
    const $c1Input = $currentRow.find('td.c1 input[type=number]').first();
    const $c2Input = $currentRow.find('td.c2 input[type=number]').first();

    // 加个兜底判断，避免动态渲染异常时脚本报错
    if (!$c1Input.length || !$c2Input.length) {
        console.warn('行', rowId, '未找到对应输入框，跳过');
        return;
    }

    // 正确取值：当前值用val()，初始值用data()取
    const c1Current = $c1Input.val();
    const c1Origin = $c1Input.data('id');
    const c2Current = $c2Input.val();
    const c2Origin = $c2Input.data('id');

    // 对比时统一转成字符串，避免数字/字符串隐式转换导致的误判
    if (String(c1Current) !== String(c1Origin) || String(c2Current) !== String(c2Origin)) {
        needSave = true;
    }

    if (needSave) {
        // 此处写ajax保存逻辑，直接用上面取到的变量传参即可
        console.log('待保存数据：', {rowId, c1Current, c2Current});
        // 示例：$.post('/save', {id: rowId, c1: c1Current, c2: c2Current})
    }
});

如果改完选择器还是有问题，按顺序检查：

• 确认执行这段遍历逻辑的时候，动态表格已经完成渲染。如果是ajax拉取数据渲染的表格，这段遍历代码必须放在渲染完成的回调里，或者绑定在保存按钮的点击事件中（点击的时候DOM肯定已经渲染完了）
• 不用反复换.attr('data-id')、dataset.id这类写法，只要你选到了正确的input元素，.data('id')是最稳妥的取值方式，拿不到值100%是元素没选对，和取值方法没关系
• 如果你实际业务里td的类名确实是pup、van，那就是动态渲染的时候类名写错了，直接在控制台打印$currentRow.html()看实际渲染出来的DOM类名和你写的选择器是否一致即可。

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