在JavaScript DataTable中修改输入框值时，如何同步更新同行列的对应字段值？

嗨，我来帮你搞定这个问题～

你现在遇到的问题根源很明确：你用了#DaysAssigned和#DaysRemaining这种ID选择器，但HTML里ID是唯一的，不管你在第几行的Points输入框输入内容，jQuery都会只找到页面上第一个匹配这个ID的元素——也就是第一行的那两个，这就是为什么只有第一行会更新。

给你一个简单直接的解决方案，分两步来：

第一步：先修正你的HTML结构 #

把每一行里的DaysAssigned和DaysRemaining的ID改成class，因为同一列的元素是重复的，不能用重复ID（这本身也不符合HTML规范）。比如原来的id="DaysAssigned"改成class="DaysAssigned"，id="DaysRemaining"改成class="DaysRemaining"。

第二步：修改JavaScript代码，定位到当前行的元素 #

我们的思路是：先找到当前触发输入的Points输入框所在的那一行，再在这一行里找对应的DaysAssigned和DaysRemaining元素，这样就能精准更新同一行的字段了。

修改后的代码如下：

$('.Points').on("keyup", function() {
    // 先拿到当前输入框所在的那一行
    const currentRow = $(this).closest('tr');
    // 获取当前输入框的Points值
    const points = $(this).val().trim();
    // 从当前行里找到DaysAssigned元素，获取它的值
    const daysassign = currentRow.find('.DaysAssigned').val().trim();
    
    // 计算剩余天数，这里要转成数字，避免字符串运算出错
    const total = parseFloat(daysassign) - (parseFloat(points) / 10);
    
    // 把计算结果更新到当前行的DaysRemaining里
    currentRow.find('.DaysRemaining').val(total);
});

额外的小提醒 #

• 为什么要用parseFloat？因为从输入框拿到的val()是字符串类型，如果直接做减法，有可能会出现意外的字符串拼接问题，转成数字后计算更稳妥。
• 如果你的DataTable是动态加载的（比如分页切换、搜索后加载新行），那最好用事件委托的方式绑定事件，这样动态新增的行也能触发这个keyup事件：

// 把事件绑定到table上，委托给里面的.Points元素
$('table').on("keyup", '.Points', function() {
    const currentRow = $(this).closest('tr');
    const points = $(this).val().trim();
    const daysassign = currentRow.find('.DaysAssigned').val().trim();
    const total = parseFloat(daysassign) - (parseFloat(points) / 10);
    currentRow.find('.DaysRemaining').val(total);
});

你之前想找行索引的思路方向是对的，不过直接定位当前行的方式会更简洁高效～ 试试看这个方案，应该就能解决你的问题啦！

备注：内容来源于stack exchange，提问作者user21359073