Javascript: Wie man über DOM Element aktualisiert?

Question

Meine Funktion unten muss einen bestimmten Zeilenwert (Fruchtname) aktualisieren, wenn die erste Auswahl geändert wurde. Wie kann ich das letzte < "input"> Element aktualisieren? Ich weiß nicht, welche DOM-Eigenschaft korrekt ist.

Ich muss DOM verwenden, so dass ich ID auf den Tags nicht festlegen muss.

HTML

<table> 
    <tbody> 
     <tr> 
      <td>Option: 
      <select onChange="updateValue(this);"> 
       <option>A</option> 
       <option>B</option> 
      </select> 
      </td> 
      <td>Quantity: 
      <select> 
       <option>1</option> 
       <option>2</option> 
      </select> 
      </td> 
      <td>Shipping Address: 
      <input type="text"/> 
      </td> 
      <td>Fruit Name: 
      <input type="text"/> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Javascript:

function updateValue(obj){ 
    var _input = obj.parentNode.nextSibling.firstChild; 
    _input.innerText = 'Apple'; 

} 

Answer 1

eine geringfügige Änderung einer Klasse in Ihrem HTML-Stellen code.Add, die die Eingabe aktualisieren helfen zu erkennen. Verwenden Sie zweimal parentNode, um zu tr zu wechseln. Dann nutzen Sie die className die input zu finden, die Sie

<td>Fruit Name: 
      <input type="text" class="fruitClass"/> 
      </td> 

JS ändern

function updateValue(obj){ 
    var _input = obj.parentNode.parentNode.getElementsByClassName("fruitClass")[0] 
    _input.value = 'Apple'; 

} 

prüfen diese jsFiddle

Answer 2

https://jsfiddle.net/kavxatro/6/

function updateValue(obj){ 
    // get the last TD of this TR 
    var _input = obj.parentNode.parentNode.lastChild; 
    // make sure we are on the TD. If not, get the previous object. 
    if (typeof _input.tagName == 'undefined') _input = _input.previousSibling; 
    // get the input inside the TD 
    _input = _input.lastChild; 
    // make sure we are on the input. If not, get the previous object. 
    if (typeof _input.tagName == 'undefined') _input = _input.previousSibling; 
    // change the input value 
    _input.value = 'Apple'; 
} 

Das erste Mal, wenn Sie parentNode aktualisieren möchten verwenden Sie Holen Sie sich die Eltern der SELECT, das ist die TD.

Die zweite parentNode erhält das übergeordnete Element dieser TD, das ist die TR.

Sie können lastChild verwenden, um das letzte Element in diesem TR zu erhalten, das ist das letzte TD.

Und da man nur innerhalb dieses TD ein Element haben, dann entweder firstChild oder lastChild sollten Sie die input Objekt erhalten. Um den Wert eines Eingabefeldes zu ändern, verwenden Sie value, nicht innerText.

Auch gibt es keinen HTML-Formulartyp textbox. Wenn Sie ein einzeiliges Eingabeformular wünschen, ist text der Typ, den Sie verwenden sollten.

 <td>Fruit Name: 
     <input type="text"/> 
     </td> 

Answer 3

firstElementChild & lastElementChild ist nur HTML-Element zu erhalten keinen Text (HTML string) .So es besser ist, spezifisches Element zu erhalten!

function updateValue(obj){ 
    var _input = obj.parentNode.parentNode.lastElementChild.firstElementChild; 
    _input.value = 'Apple';  
}