获取表格每行number类型input值失败，求解决方案

问题分析 #

你的代码存在两个关键问题：

• 错误地尝试获取<td>元素的值：<td>本身没有val()方法，你需要定位到<td>内部的<input>元素。
• 重复使用ID：动态生成多行时，id="calcul"和id="evolution"会导致DOM中出现重复ID，这不符合HTML规范，也会干扰选择器的正常工作。

修正后的代码 #

1. 动态生成表格行的HTML模板（替换重复ID为类）

$('table#genere tbody').append(`
    <tr>
        <td><div id='labo'>${obj.labos}</div></td>
        <td>${obj.articles}</td>
        <td><input class="form-control form-control-sm evolution" type="number" min="0" placeholder="1.20" value=""></td>
        <td><input type="checkbox" class="checkbox actif" data-articles="${obj.articles}" value="${obj.actif}"></td>
        <td><div id="qte">${obj.qteder}</div></td>
        <td><div id="objectif">${obj.objectif}</div></td>
        <td><button type="button" class="btn btn-outline-success calcul">calculer</button></td>
    </tr>
`);

2. jQuery点击事件处理代码（正确定位输入框）

$('#genere tbody').on('click', '.calcul', function(){
    let currentrow = $(this).closest('tr');
    // 直接通过类名定位当前行的number输入框
    let evol = currentrow.find('.evolution').val();
    // 可选：将字符串值转为数字类型
    // let evolNum = parseFloat(evol) || 0;
    console.log(evol);
});

关键说明 #

• 使用类名（.calcul、.evolution）替代ID，避免重复ID问题，确保选择器能正确匹配所有动态生成的元素。
• 通过currentrow.find('.evolution')直接定位到当前行内的输入框，相比依赖<td>索引（td:eq(2)）更健壮，即使表格结构调整也不会失效。
• 如果需要数值类型的结果，可以用parseFloat()或Number()将输入值从字符串转为数字，同时处理空值或非数字的情况（比如默认设为0）。

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