Question

让表格结构如下

<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脚本但是PLZ不会投票。 bt可能会问你对这个问题的理解。

Answer 1

绑定输入字段的事件处理程序

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

正如评论所说，这不是代码写入服务。你应该尝试自己做，并在这里发布你做过的事情。不仅是问题。

解释你需要一些J来实现你的目标。

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

的原因

下一步是向元素添加event listener。这就像用自然语言说：当事件发生时，到函数。因此，您指定当元素keydown上的事件id_a发生时，运行作为回调传递的函数。

在该函数中，您唯一需要做的就是将新类分配给更改其属性的元素，例如color，例如

＆＃13;

(function() {
  var e = document.getElementById("id_a");

  e.addEventListener("keydown", function() {
    e.className = "red";
  });

})();

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

是的，您可以通过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>

Answer 4

您可以使用jQuery来解决此问题

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何用js改变td的属性？

4 个答案: