Laravel商品采购页面Add Products按钮分类列异常问题求助

问题分析 #

1. 点击Add Products时CATEGORY列第一行空：添加新行时未直接将当前选中的分类值赋值给新行，或循环逻辑未覆盖第一行（比如初始行创建后才执行循环，导致第一行遗漏）。
2. 切换分类下拉后表格不实时更新：未给下拉框绑定change事件监听，分类变更后仅在点击添加按钮时才同步，没有实时更新现有行的分类值。

修复步骤 #

1. 修复添加产品时第一行分类为空的问题 #

点击添加按钮时，直接获取当前下拉框的选中文本，在创建新行时就插入到CATEGORY单元格中，无需依赖后续循环。这样新添加的每一行都会直接带上当前选中的分类，不会出现空行。

2. 修复切换分类后表格不实时更新的问题 #

给分类下拉框添加change事件监听，当选中值变化时，遍历表格中所有数据行的CATEGORY单元格，直接更新为新选中的分类文本。

代码示例（基于jQuery） #

假设你的页面HTML结构如下：

<div>
    <label>选择分类：</label>
    <select id="category-select">
        <option value="1">电子产品</option>
        <option value="2">服装</option>
        <option value="3">食品</option>
    </select>
    <button id="add-product-btn">Add Products</button>
</div>

<table id="purchase-table" class="table">
    <thead>
        <tr>
            <th>CATEGORY</th>
            <th>产品名称</th>
            <th>数量</th>
        </tr>
    </thead>
    <tbody id="products-body">
        <!-- 动态生成的产品行 -->
    </tbody>
</table>

对应的JS修复代码：

// 添加产品按钮点击事件
$('#add-product-btn').on('click', function() {
    // 获取当前选中的分类文本
    const currentCategory = $('#category-select option:selected').text();
    
    // 创建新行，直接嵌入分类值
    const newProductRow = `
        <tr class="product-row">
            <td class="category-col">${currentCategory}</td>
            <td><input type="text" name="product_name[]"></td>
            <td><input type="number" name="quantity[]" min="1"></td>
        </tr>
    `;
    
    // 追加到表格tbody
    $('#products-body').append(newProductRow);
});

// 分类下拉框变更事件，实时更新所有产品行的分类
$('#category-select').on('change', function() {
    const newCategory = $(this).find('option:selected').text();
    // 遍历所有产品行的分类单元格，更新内容
    $('#products-body .product-row .category-col').text(newCategory);
});

为什么之前的.each循环没生效？ #

大概率是循环的选择器有误（比如选中了表头行，或者未精准定位到数据行的分类单元格），或者循环执行时机不对（比如在新行创建前执行，导致第一行未被赋值）。上述方案直接在创建行时赋值，变更时精准遍历数据行，避免了循环的潜在问题。

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