如何通過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的屬性？

回答

相關問題