For example : i have an input box that contains a few cell names:
<input type="text" id="occuredrooms" value="001 002 003 006">
and a table :
<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>
how can I change those to classes that match the input into inactive? Please help. I manage to go this far but :(( It somehow still doesn't work.
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');
}
}
}
This is just a code improvement
Your JavaScript code looks really messy. This might look more readable
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');
}
})
The commented line is another way of doing it.
I've made the changes and given you a working version
<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>
function updateTable(e){
if(!document.getElementById('occuredrooms').value){
var x = document.getElementsByClassName('room');
for(j=0;j<=x.length-1;j++){
x[j].classList.remove('active');
x[j].classList.add('inactive');
}
}
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].classList.add('active');
x[j].classList.remove('inactive');
}
}
}
}
var x = document.getElementsByClassName('room');
for(j=0;j<=x.length-1;j++){
x[j].classList.remove('active');
x[j].classList.add('inactive');
}
.room.active{
background-color: greenyellow;
}
.room.inactive{
background-color: rgb(151, 49, 49);
}
Maybe this example will help ?
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>