如何在JavaScript循环中检测表格单元格的select/input元素并收集值？

嘿，刚接触JavaScript完全不用不好意思，你的思路已经很到位了！我来帮你完善这段代码，解决检测select/input元素和数据收集的问题：

核心问题解决点 #

• 检测单元格内的表单元素：可以用querySelector()方法快速查找单元格内的select或input元素，返回结果不为null就说明存在对应元素
• 变量名一致性：你定义的是ingredient_dict，但后续写了$ingredient_dict，要统一命名（JS里$只是变量名的一部分，不是语法要求，保持一致即可）
• 收集多行数据：如果要保存所有行的食材信息，需要在循环外定义一个数组，每次循环把当前行的字典存入数组，避免被覆盖

修改后的完整代码 #

// 获取表格元素
var table = document.getElementById('selected_ingredients');
var rowCount = table.rows.length;
// 计算有效单元格数（排除最后带删除按钮的列）
var cellsCount = table.rows[0].cells.length - 1;

// 定义数组保存所有食材信息（如果只需要当前行可以去掉）
var ingredientsList = [];

// 遍历表格行（从第1行开始，跳过表头）
for (var r = 1; r < rowCount; r++) {
    // 初始化当前行的食材字典
    var ingredient_dict = {};
    // 遍历当前行的单元格
    for (var c = 0; c < cellsCount; c++) {
        var cell = table.rows[r].cells[c];
        
        // 检查单元格是否有select元素
        var selectEl = cell.querySelector('select');
        if (selectEl) {
            ingredient_dict["UOM"] = selectEl.options[selectEl.selectedIndex].value;
        } 
        // 检查单元格是否有input元素
        else if (cell.querySelector('input')) {
            ingredient_dict["qty"] = cell.querySelector('input').value;
        } 
        // 其他情况视为食材名称单元格
        else {
            ingredient_dict["name"] = cell.textContent.trim();
        }
    }
    // 将当前行的食材信息存入数组
    ingredientsList.push(ingredient_dict);
}

// 可以打印看看结果
console.log(ingredientsList);

额外说明 #

• 关于你动态创建select的代码：完全没问题，querySelector('select')能正确找到你添加的这个下拉框，因为它已经被append到单元格里了
• 如果你的input是文本框，value属性能正确获取内容；如果是其他类型（比如数字框）也适用
• cell.textContent.trim()用来获取单元格的文本内容，去掉多余的空格，避免意外的空白字符

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