I need to change some of the table td class that have same innerhtml in an input box

Question

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');
                }
            }
        }

The loops works but this x[j].innerHTML==arr[i] code line somehow doesn't compare anything — Huy Tran, Oct 23 '21 at 05:03
Sadly but no, i can't find the same problem in the post you gave me. I just need to change class of few td with specific name given in the input (001, 002, 003). But anyways thank you very <3333 — Huy Tran, Oct 23 '21 at 05:07
@HuyTran It's right here in this answer: https://stackoverflow.com/a/22270709/378779. To remove a class, you need to use `x[j].classList.remove('active')` and to add a class you need `x[j].classList.add('inactive')`. — kmoser, Oct 23 '21 at 05:12

pxDav · Answer 1 · 2021-10-23T05:25:39.177

0

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.

edited Oct 23 '21 at 05:25

answered Oct 23 '21 at 05:16

pxDav

1,498
9
18

This also help me out thanks you so much <333 – Huy Tran Oct 23 '21 at 05:24

score 0 · Accepted Answer · answered Oct 23 '21 at 05:20

HI working example

I've made the changes and given you a working version

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


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');
    }

CSS


    .room.active{
        background-color: greenyellow;

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

please mark my answer as the answer (the green tick). thanks — Dean Van Greunen, Oct 23 '21 at 10:06

score -1 · Answer 3 · answered Oct 23 '21 at 05:12

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>

Thanks you very much its a much better way to go like this, i will take my note about thi <333 — Huy Tran, Oct 23 '21 at 05:23

I need to change some of the table td class that have same innerhtml in an input box

3 Answers3

HTML

javascript

CSS