我需要在输入框中更改一些具有相同 innerhtml 的 table td class

Question

例如：我有一个包含一些单元格名称的输入框：

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

和一个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>

如何将与输入匹配的类更改为非活动状态？请帮忙。我设法做到了这一点，但是 :(( 它仍然无法正常工作。

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

也许这个例子会有帮助？

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>

Answer 2

这只是代码改进

您的 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 3

嗨working example

我已经进行了更改并为您提供了一个工作版本

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

我需要在输入框中更改一些具有相同 innerhtml 的 table td class

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

html

javascript

css

innerhtml

HTML

javascript

CSS