Wie setze ich das nächste Eingabefeld ohne Klasse oder ID

Question

Ich bin ein Neuling bei JQuery und Javascript. Ich habe eine Tabelle, die dynamisch erstellt wird (mit DataTables-Plugin) und hat 6 Spalten und 0 oder mehr Zeilen. Die ersten vier Spalten enthalten zwei Dropdown-Menüs und zwei Eingabefelder. Ich versuche, den Wert des nächsten Eingabefeldes basierend auf der Auswahl im entsprechenden Dropdown-Menü festzulegen.

Im folgenden Beispiel enthält das erste Dropdown zwei Werte: Site1 und Site2. Wenn der Benutzer Site2 auswählt, sollte das Ereignis onchange ausgelöst werden, und die Funktion getSiteObjects() füllt das nächste Eingabefeld mit einem Wert. Ich weiß nicht, welches Dropdown-Menü sie auswählen, aber ich weiß, dass das nächste Formularfeld das entsprechende Eingabefeld sein wird, das ich einstellen möchte. Wie kann ich das nächste Eingabefeld setzen?

Snippet des HTML:

<tr class="customizationRow odd" role="row"> 
    <td class="sourceSiteCell"> 
     <div class="form-group"> 
      <select class="form-control user-input" onchange="getSiteObjects(this)"> 
       <option class="option"/> 
       <option class="option">Site1</option> 
       <option class="option">Site2</option> 
      </select> 
     </div> 
    </td> 
    <td class="sourceObjectCell"> 
     <input class="form-control user-input" type="text" value=""> 
    </td> 
    <td class="targetSiteCell"> 
     <div class="form-group"> 
      <select class="form-control user-input" onchange="getSiteObjects(this)"> 
       <option class="option"/> 
       <option class="option">Site1</option> 
       <option class="option">Site2</option> 
      </select> 
     </div> 
    </td> 
    <td class="targetObjectCell"> 
     <input class="form-control user-input" type="text" value=""> 
    </td> 
<!-- More of the same code for the other columns --> 
</tr> 

JavaScript Funktion:

function getSiteObjects(select) { 
    var selectedSite = select.value; // Gets the value selected 

    <!-- Make an ajax call to get the value from a REST service --> 
    $(this).next('input').val("Hello1"); // Doesn't work 
    $(this).find('input').val("Hello2"); // Doesn't work 
    // select.next('input').val("Hello3"); // Doesn't work 
} 

Ich habe eine jsFiddle Demo meiner Frage: jsFiddle Demo

Answer 1

$() ist die jQuery -Konstruktorfunktion.

this ist eine Referenz auf das DOM-Element des Aufrufs.

so im Allgemeinen, in $(this), müssen Sie die this (in Ihrem Fall erhalten Parameter select) in $() als Parameter übergeben, so dass Sie jQuery Methoden und Funktionen aufrufen können.

function getSiteObjects(select) { 
 
    var _this = $(select); 
 
    _this.closest('td').next('td').find('input').val(_this.val()); 
 
}

.console-line 
 
{ 
 
    font-family: monospace; 
 
    margin: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-hover"> 
 
<tr> 
 
    <th>Source Site</th> 
 
    <th>Source Object</th> 
 
    <th>Target Site</th> 
 
    <th>Target Object</th> 
 
</tr> 
 
<tr class="customizationRow odd" role="row"> 
 
    <td class="sourceSiteCell"> 
 
     <div class="form-group"> 
 
      <select class="form-control user-input" onchange="getSiteObjects(this)"> 
 
       <option class="option"/> 
 
       <option class="option">Site1</option> 
 
       <option class="option">Site2</option> 
 
      </select> 
 
     </div> 
 
    </td> 
 
    <td class="sourceObjectCell"> 
 
     <input class="form-control user-input" type="text" value=""> 
 
    </td> 
 
    <td class="targetSiteCell"> 
 
     <div class="form-group"> 
 
      <select class="form-control user-input" onchange="getSiteObjects(this)"> 
 
       <option class="option"/> 
 
       <option class="option">Site1</option> 
 
       <option class="option">Site2</option> 
 
      </select> 
 
     </div> 
 
    </td> 
 
    <td class="targetObjectCell"> 
 
     <input class="form-control user-input" type="text" value=""> 
 
    </td> 
 
<!-- More of the same code for the other columns --> 
 
</tr> 
 
</table>

Answer 2

Sie haben falsche Auswahlelement zum Ziel. Für Targeting-Eingang,

1) Sie müssen Eltern td Element mit Klasse zu durchqueren targetSiteCell .closest('.targetSiteCell') mit

2) Dann zum nächsten td .next()

3) zusammen mit .find() Verfahren unter Verwendung von Eingabeelement finden in TD:

$(this).closest('.targetSiteCell').next().find('input').val("Hello1");