javascript - 如何根据javascript中的输入值更改背景框

Question

我在这里尝试根据值更改颜色，其余部分应为白色背景，如果输入值为 1，则应突出显示为红色，如果我将值更改为 4，则应突出显示为红色和其余值 1 应该是白色

还在学习中，先谢谢了

<table>
   <tr>
      <td id="data1">1</td>
      <td>2</td>
      <td>3</td>
   </tr>
   <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
   </tr>
   <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
   </tr>
</table>

<input type="text" id="valuesData" />
<button onclick="myFunction()" value="click me"></button>
</body>


<script>
   function myFunction(){
    if(document.getElementById('valuesData').value >= '9'){
    document.getElementById('data1').style.background='red' 
      }
   else{
   alert("value should not be greater than 9");
   }
   }
    
</script>
     
    
                         

Answer 1

你可以使用 data attributes查看哪个 td 具有输入文本的 value。它将更改输入值 td 的背景。

此外，在将背景红色应用于输入值之前，我们可以检查所有 tds 并使用白色背景清除它们。

输入中输入的所有值都是字符串格式，因此我们需要使用 parseInt 函数来确保它们被转换为 integar。

现场演示:

function myFunction() {
  //Get input value and convert to int using parseInt
  let value = parseInt(document.getElementById('valuesData').value)
  //Clear all the td with white background
  let allTds = document.getElementsByTagName('td');
  for (let i = 0; i < allTds.length; i++) {
    allTds.item(i).style.background = 'white'
  }
  //Apply red background to the entered td with matching data-id
  let getTd = document.querySelector('[data-id="' + value + '"]');
  if (value <= '9') {
    getTd.style.background = 'red'
  } else {
    alert("value should not be greater than 9");
  }
}

<table>
  <tr>
    <td data-id="1">1</td>
    <td data-id="2">2</td>
    <td data-id="3">3</td>
  </tr>
  <tr>
    <td data-id="4">4</td>
    <td data-id="5">5</td>
    <td data-id="6">6</td>
  </tr>
  <tr>
    <td data-id="7">7</td>
    <td data-id="8">8</td>
    <td data-id="9">9</td>
  </tr>
</table>
<input type="text" id="valuesData" />
<button onclick="myFunction()">Click me</button>