Por ejemplo: tengo un cuadro de entrada que contiene algunos nombres de celda:
<input type="text" id="occuredrooms" value="001 002 003 006">y una mesa:
<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>¿Cómo puedo cambiarlos a clases que coincidan con la entrada en inactivos? Por favor ayuda. Me las arreglé para llegar tan lejos pero :(( De alguna manera todavía no funciona.
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'); } } }Esto es solo una mejora del código.
Su código JavaScript se ve muy desordenado. Esto podría parecer más legible
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'); } })La línea comentada es otra forma de hacerlo.
hola ejemplo de trabajo
Hice los cambios y te di una versión funcional.
<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); }¿Quizás este ejemplo ayude?
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>