我需要在输入框中更改一些具有相同 innerhtml 的表 td 类[重复]

Posted 2023-05-07

【中文标题】我需要在输入框中更改一些具有相同 innerhtml 的表 td 类[重复]

【英文标题】：I need to change some of the table td class that have same innerhtml in an input box [duplicate]

【发布时间】：2021-12-09 14:10:04

【问题描述】：

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

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

【问题讨论】：

“不知何故仍然无法正常工作”请解释发生了什么

循环有效，但这个 x[j].innerHTML==arr[i] 代码行不知何故无法比较任何东西

遗憾的是，我在你给我的帖子中找不到同样的问题。我只需要使用输入中给出的特定名称（001、002、003）更改少数 td 的类。但无论如何，非常感谢你

@HuyTran 就在这个答案中：***.com/a/22270709/378779。删除类需要使用x[j].classList.remove('active')，添加类需要x[j].classList.add('inactive')。

【参考方案1】：

你好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);
    

【讨论】：

如此详细，非常感谢

请将我的答案标记为答案（绿色勾号）。谢谢

【参考方案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');
    
)

注释行是另一种方式。

【讨论】：

这对我也有帮助，非常感谢

【参考方案3】：

也许这个例子会有所帮助？

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>

【讨论】：

非常感谢，这是一个更好的方法，我会记下关于 thi