Blade模板foreach循环下数值≤20时td加红类仅首条生效问题咨询

HTML规范要求页面内id属性必须全局唯一，你在循环渲染时给所有目标td都设置了相同的id="changecolor"，导致document.getElementById只能匹配到页面中第一个出现的该id元素，因此只有第一条符合条件的元素生效。

1. 修改Blade模板 #

将目标td的id属性替换为class属性，用于批量匹配所有对应元素：

@foreach ($scaduti as $item )
    <tr>
       <td>{{$item->name}}</td>
       <td>{{$item->lotto}}</td>
       <td>{{carbon\Carbon::createFromFormat('Y-m-d', $item->data_di_scadenza)->format('d-m-Y')}}</td>
       <td>{{$item->sector->settore}}</td>
       <td>{{$item->sector->scaffale}}</td>
       <!-- 把id换成class -->
       <td class="stock-qty">{{$item->sector->quantita_rimanente - $item->sector->quantita_bloccata}}</td>
       <td>{{$item->sector->quantita_bloccata}}</td>
    </tr>
 @endforeach

2. 修改JS逻辑 #

遍历所有匹配class的td元素，逐个判断数值后添加样式类：

// 选中所有库存数量td元素
const stockQtyList = document.querySelectorAll('.stock-qty')

stockQtyList.forEach(td => {
    // 转换为数字避免字符串比较异常
    const num = Number(td.textContent.trim())
    if(num <= 20) {
        td.classList.add('changetored')
    }
})

无需依赖前端JS，后端渲染时直接判断数值添加类，性能更高且不会出现样式延迟闪烁问题：

@foreach ($scaduti as $item )
    @php
        // 提前计算可用库存
        $availableQty = $item->sector->quantita_rimanente - $item->sector->quantita_bloccata;
    @endphp
    <tr>
       <td>{{$item->name}}</td>
       <td>{{$item->lotto}}</td>
       <td>{{carbon\Carbon::createFromFormat('Y-m-d', $item->data_di_scadenza)->format('d-m-Y')}}</td>
       <td>{{$item->sector->settore}}</td>
       <td>{{$item->sector->scaffale}}</td>
       <!-- 直接判断添加类 -->
       <td class="{{ $availableQty <= 20 ? 'changetored' : '' }}">{{ $availableQty }}</td>
       <td>{{$item->sector->quantita_bloccata}}</td>
    </tr>
 @endforeach

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