如何通过js更改td的属性？

-1

<table> 
<tr> 
<td>AA</td><td>BB</td><td>CC</td> 
</tr> 
<tr> 
<td><input type="text" name="a" id="id_a" /></td> 
<td><input type="text" name="b" id="id_b" /></td> 
<td><input type="text" name="c" id="id_c" /></td> 
</tr> 
</table>

在这里，我需要改变的id="id_a"文本字段的颜色，如果XYZ是在文本字段中键入id="id_a"

任何一个可以建议我JS脚本这样做。
但是，请不要倒票。 bt可能会问你不明白的问题。

来源

2016-05-11 yank

我们都知道下调的事件处理程序投票非常简单，然后回答问题。因此，请告诉你如何能够回答 – yank

由于这不是一个代码写作服务，所以人们对你不利。你试过什么了？ –

我正在准备你的答案.. :) PLZ等待 –

-2

您可以使用jQuery解决这个

 $('#id_a').on('input',function(e){ 
 
     if($('#id_a').val()=='xyz'){ 
 
      $("#id_a").css("background-color", "#FFFF00"); 
 
     }else{ 
 
      $("#id_a").css("background-color", "#FFFFFF"); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<td>AA</td><td>BB</td><td>CC</td> 
 
</tr> 
 
<tr> 
 
<td><input type="text" name="a" id="id_a" /></td> 
 
<td><input type="text" name="b" id="id_b" /></td> 
 
<td><input type="text" name="c" id="id_c" /></td> 
 
</tr> 
 
</table>

来源

2016-05-11 09:39:23

正如评论说，这不是一个代码书面方式服务。你应该尝试自己做，并在这里张贴你所做的。不仅是问题。

解释您将需要一些Js来实现您的目标。

首先，您需要选择要添加功能的元素，在此例中为id_a。这是document.getElementById的原因。

下一步是向元素添加一个event listener。这就像用自然语言说的：当事件发生时，发生在功能上。因此您指定当发生元素id_a上的事件时，请运行以回调方式传递的函数。

内部的功能，你所要做的就是分配一个新的类来改变它的属性，如color元素的唯一的事，例如

(function() { 
 
    var e = document.getElementById("id_a"); 
 

 
    e.addEventListener("keydown", function() { 
 
    e.className = "red"; 
 
    }); 
 

 
})();

.red { 
 
    color: #ff0000; 
 
    border: 1px solid #ff0000; 
 
}

<table> 
 
    <tr> 
 
    <td>AA</td> 
 
    <td>BB</td> 
 
    <td>CC</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="a" id="id_a" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="b" id="id_b" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="c" id="id_c" /> 
 
    </td> 
 
    </tr> 
 
</table>

来源

2016-05-11 09:39:56

是的，你可以做通过选择所有输入元素querySelectorAll并附加事件监听器。

这里，我给点击事件，你可以改变移动你想要

<script type="text/javascript"> 
    var field = document.querySelectorAll("input");  
    for(var i =0 ;i<field.length;i++){ 
     field[i].addEventListener("click",function(e){ 
      e.preventDefault(); 
      this.style.color = "red"; 
     },false);   
    } 
</script>

来源

2016-05-11 09:41:06

绑定输入域

document.getElementById('id_a') // get the input field 
 
    .addEventListener('input', function() { //bind event handler 
 
    this.style.color = this.value.trim() == 'xyz' ? 'red' : 'black'; // based on the input value update the color 
 
    })

<table> 
 
    <tr> 
 
    <td>AA</td> 
 
    <td>BB</td> 
 
    <td>CC</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="a" id="id_a" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="b" id="id_b" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="c" id="id_c" /> 
 
    </td> 
 
    </tr> 
 
</table>

来源

2016-05-11 09:41:45

如何通过js更改td的属性？

回答

相关问题