我需要改变一些表td类在输入框中有相同的innerhtml

Question

例如:我有一个输入框，其中包含几个单元格名称:

<input type="text" id="occuredrooms" value="001 002 003 006">

和一个表:

<table class="table">
<tr>
<td class="room active">001</td>
<td class="room active">002</td>
<td class="room active">003</td>
<td class="room active">004</td>
</tr>
<tr>
<td class="room active">005</td>
<td class="room active">006</td>
<td class="room active">007</td>
<td class="room active">008</td>
</tr>
<tr>
<td class="room active">009</td>
<td class="room active">010</td>
<td class="room inactive">011</td>
<td class="room active">012</td>
</tr>
</table>
<style>
.room.active{
background-color: greenyellow;
}
.room.inactive{
background-color: rgb(151, 49, 49);
}
</style>

如何将这些更改为与输入匹配的类为非活动的?请帮助。我设法做到了这一点，但是:(不知怎么的，它仍然不起作用。

let arr = document.getElementById('occuredrooms').value.split(' ');
var x = document.getElementsByClassName('room');
for (i = 0; i <= arr.length - 1; i++) {
for(j=0;j<=x.length-1;j++){
if(x[j].innerHTML==arr[i]){
x[j].removeClass('active').addClass('inactive');
}
}
}

Answer 1

工作示例

我已经做了更改，并给了你一个工作版本

<标题>HTML

<input type="text" id="occuredrooms" value="" onChange="updateTable()">
<table class="table">
<tr>
<td class="room active">001</td>
<td class="room active">002</td>
<td class="room active">003</td>
<td class="room active">004</td>
</tr>
<tr>
<td class="room active">005</td>
<td class="room active">006</td>
<td class="room active">007</td>
<td class="room active">008</td>
</tr>
<tr>
<td class="room active">009</td>
<td class="room active">010</td>
<td class="room inactive">011</td>
<td class="room active">012</td>
</tr>
</table>

<标题>

javascript h1> CSS h1> div class="one_answers">这只是一个代码改进

你的JavaScript代码看起来很乱。这可能看起来更可读

let inactive_arr = document.getElementById('occuredrooms').value.split(' ');
//let rooms = document.querySelectorAll('.room');
let rooms = document.getElementsByClassName('room');
//rooms.forEach
[...rooms].forEach(el=>{
if(inactive_arr.includes(el.innerHTML)) {
el.classList.remove('active');
el.classList.add('inactive');
}
})

注释行是另一种方式。

Answer 2

也许这个例子会有帮助?

document.getElementById('occuredrooms').addEventListener("input", (e) => {
let arr = e.target.value.split(' ');
document.querySelectorAll("table td.room").forEach((el) => {
if (arr.indexOf(el.innerHTML) >= 0) {
el.classList.remove('active');
el.classList.add('inactive');
} else {
el.classList.remove('inactive');
el.classList.add('active');
}
})
})

<input type="text" id="occuredrooms" value="001 002 003 006">
<table class="table">
<tr>
<td class="room active">001</td>
<td class="room active">002</td>
<td class="room active">003</td>
<td class="room active">004</td>
</tr>
<tr>
<td class="room active">005</td>
<td class="room active">006</td>
<td class="room active">007</td>
<td class="room active">008</td>
</tr>
<tr>
<td class="room active">009</td>
<td class="room active">010</td>
<td class="room inactive">011</td>
<td class="room active">012</td>
</tr>
</table>
<style>
.room.active {
background-color: greenyellow;
}

.room.inactive {
background-color: rgb(151, 49, 49);
}
</style>