2016-05-11 5 views
-1

Let Tabellenstruktur ist wie folgtWie ändert man die Eigenschaft von td durch js?

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

Hier muß ich die Farbe des Textfeldes von id="id_a" ändern, wenn xyz in Textfeld eingegeben wird id="id_a"

Jeder kann ich Skript vorschlagen js dies zu tun.
Aber plz nicht abstimmen. Vielleicht fragst du, was du nicht über Fragen verstehst.

+1

Wir alle wissen, Down- Abstimmung ist so einfach, dann die Frage zu beantworten. So plz dnt zeigen, wie Sie in der Lage sind zu antworten – yank

+2

Menschen downvote Sie, weil dies kein Code-Writing-Service ist. Was hast du bisher versucht? –

+1

Ich bereite deine Antwort vor .. :) plz warte –

Antwort

-2

Sie können jQuery verwenden diese

 $('#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>

0

zu lösen, wie Kommentare sagen, dieser Dienst nicht ein Code writting ist. Sie sollten versuchen, es selbst zu tun und hier zu posten, was Sie getan haben. Nicht nur das Problem.

Die Erklärung Sie benötigen ein bisschen Js, um Ihr Ziel zu erreichen.

Zunächst müssen Sie das Element auswählen, dem Sie Funktionalität hinzufügen möchten, in diesem Fall id_a. Dies ist der Grund für die document.getElementById.

Der nächste Schritt ist das Hinzufügen eines event listener zum Element. Das ist wie in einer natürlichen Sprache zu sagen: wenn das Ereignis passiert, zur Funktion. Sie geben also an, dass, wenn das Ereignis keydown für das Element id_a passiert, die als Callback übergebene Funktion ausgeführt wird.

Innerhalb dieser Funktion, das einzige, was Sie tun müssen, ist eine neue Klasse mit dem Element zugeordnet wird, es Eigenschaften ändert, wie color zum Beispiel

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

0

Ja, Sie können tun indem Sie alle Eingabeelemente mit querySelectorAll auswählen und den Ereignis-Listener anhängen.

Hier gebe ich Ereignis klicken, können Sie ändern, was u wollen

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

Bind ein Ereignishandler für das Eingabefeld

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>

Verwandte Themen