如何用JavaScript获取自动生成表格列内同ID文本输入框的值

兄弟，先给你提个关键问题：你给所有文本输入框用了同一个ID，这可是违反HTML规范的——ID在页面里必须是唯一的，这会导致你用JS获取元素时只能拿到第一个匹配的输入框，根本拿不到所有的值。所以第一步得先改这个：把输入框的ID换成统一的类名，比如给每个输入框加个class="rule-input"，这样才能正确选中每行里的输入框。

然后看你现有的代码，我给你补全并修改了逻辑，直接能用：

$(document).on('click', '.oc-save-upgrade-downgrade-rules', function (event) {
    // 获取复选框选中的行ID
    var sel = $.fn.yiiGridView.getChecked('oc-list-upgradeRule', 'chkbox');
    
    // 先验证有没有选中行
    if (!sel || sel.length === 0) {
        alert('得先选要保存的行啊！');
        return;
    }
    
    // 用来存所有选中行的输入值
    var inputValues = [];
    
    // 遍历每个选中的行ID，对应拿输入框的值
    $.each(sel, function(index, rowId) {
        // 找到对应行里的输入框（这里用类名选择，避免ID重复坑）
        var inputVal = $('#' + rowId).find('.rule-input').val();
        // 把行ID和对应值存起来，方便后续提交
        inputValues.push({
            rowId: rowId,
            inputValue: inputVal
        });
    });
    
    // 这里可以打印看看收集到的值，调试用
    console.log('收集到的输入值:', inputValues);
    
    // 要是需要提交到后端，直接用AJAX就行，比如下面这样
    /*
    $.ajax({
        url: '/your-save-api-url',
        method: 'POST',
        data: { upgradeRules: inputValues },
        success: function(res) {
            alert('保存成功！');
            // 保存完可以刷新表格
            $.fn.yiiGridView.update('oc-list-upgradeRule');
        },
        error: function() {
            alert('保存失败，再试试？');
        }
    });
    */
});

给你解释下关键步骤：

• 替换ID为类名：这是核心，解决了ID重复导致的选择器失效问题，确保能定位到每行里的输入框
• 遍历选中行：通过$.each循环你拿到的选中行ID，精准定位到对应行的输入框
• 关联行ID和值：把每个输入值和对应的行ID绑定，这样后端能知道哪个行对应哪个值，不会乱

另外提个小细节：如果你的表格行不是用rowId作为元素ID，而是用data-key属性（比如Yii GridView默认的行结构），那你得把选择器改成$('tr[data-key="' + rowId + '"]').find('.rule-input')，根据你实际的DOM结构调整就行。

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