如何将HTML表格中与输入框内容匹配的td元素class修改为inactive

问题原因 #

你的代码无法生效的核心问题如下：

• removeClass()、addClass()是jQuery框架提供的专属方法，你通过原生document.getElementsByClassName拿到的是原生DOM元素对象，本身不具备这两个方法，调用会直接报错导致逻辑中断。
• 额外可优化点：两层循环的写法效率较低，可将输入框值转为Set结构简化判断逻辑，同时用textContent替代innerHTML取值更安全，避免单元格内有HTML标签时判断出错。

正确实现代码（原生JS无依赖） #

// 处理输入框值，转成Set结构方便快速匹配
const targetRooms = new Set(document.getElementById('occuredrooms').value.trim().split(' '));
// 获取所有状态为active的房间单元格
const roomCells = document.querySelectorAll('.room.active');

// 遍历单元格匹配修改样式
roomCells.forEach(cell => {
    if (targetRooms.has(cell.textContent.trim())) {
        cell.classList.remove('active');
        cell.classList.add('inactive');
    }
})

若你坚持使用jQuery实现 #

需要先在页面引入jQuery库，再调整代码写法如下：

const targetRooms = $('#occuredrooms').val().trim().split(' ');
$('.room.active').each(function() {
    if (targetRooms.includes($(this).text().trim())) {
        $(this).removeClass('active').addClass('inactive');
    }
})

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