如何在jQuery中使用index为表格对应行设置乘法计算结果值

你现有代码的核心问题是$('.val1')、$('.val2')会选中页面中所有对应类名的元素，取值时默认只返回第一个元素的内容，赋值时会给所有匹配元素设置相同值，因此出现所有Value2字段结果一致的问题。

解决方法 #

方法1：按行遍历（推荐，可维护性更高） #

直接遍历表格的每一行，单独处理每行的计算逻辑，不需要依赖index也能实现精准匹配：

$("#btn").on("click", function() {
    // 将输入的乘数转为数字，避免字符串拼接导致的计算错误
    const multiplier = Number($('#value').val())
    // 非法输入判断，可根据需求扩展提示
    if (isNaN(multiplier)) return

    // 遍历表格每一行
    $("table > tbody > tr").each(function() {
        // 仅查找当前行内的val1、val2元素，和其他行隔离
        const val1 = Number($(this).find('.val1').val())
        const val2 = val1 * multiplier
        $(this).find('.val2').val(val2)
    })
})

方法2：使用index匹配对应元素（符合你要求的index用法） #

利用each回调返回的索引，匹配相同位置的Value1和Value2元素：

$("#btn").on("click", function() {
    const multiplier = Number($('#value').val())
    if (isNaN(multiplier)) return

    // 提前获取所有val1、val2的元素集合
    const $val1List = $('.val1')
    const $val2List = $('.val2')

    $val1List.each(function(index) {
        // index为当前val1在集合中的索引，取对应索引的val2赋值
        const val1 = Number($(this).val())
        $val2List.eq(index).val(val1 * multiplier)
    })
})

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