Get Textfeld Wert aus dynamisch erstellten Tabelle

Question

Ich habe eine Tabelle, wo ich Ajax verwenden, um die Daten aus der Datenbank zu erhalten. Nach jeder Zeile habe ich eine Reihe von Textboxen. Ich brauche die Daten von jeder Zeile aus der Datenbank und die Daten, die manuell in die Textfelder eingegeben werden. Ich kann die Daten nicht aus den Textfeldern abrufen. Ich werde immer undefiniert oder ein leeres Ergebnis. Ich habe es mit IDs und Klassen versucht, aber ohne Ergebnis. Kann mir jemand sagen, was ich falsch mache?

Dies ist ein, was die Tabelle sieht aus wie

https://www.dropbox.com/s/wvnjkgsx6k1k4es/PastedGraphic-1.png?dl=0

Und das ist ein Teil meines Code

function opslaan() { 
    $('#tabelddl tbody tr').each(function() { 
     var cijfer1 = $(this).find(".vraag1").val(); 
    }); 
} 

Hier der Aufruf Ajax ist

$.ajax({ 
     url:"../php/zoek_opleiding_cijfer.php", 
     type:"POST", 
     async: false, 
     data : 
     { 
      'opleidingid' : opleidingid 
     }, 
     success: function(data) { 
      var trHTML = ''; 
      $("#tabelddl tbody").remove(); 
      $.each(data,function(i,item) { 
       trHTML += '<tr><td style="display:none;">' + data[i].opleiding_id + 
       '</td><td style="display:none;">' + data[i].id + 
       '</td><td style="display:none;">' + data[i].inschrijving_id + 
       '</td><td style="display:none;">' + data[i].naam_opleiding + 
       '</td><td>' + data[i].achternaam + '</td><td>' + 
        data[i].tussenvoegsel + '</td><td>' + data[i].voornaam + 
       '</td> <td class= "vraag1" id="vraag1" style="display:none;">' + 
       '<input type="text"></td> </td>' + 
       '</td> <td class= "vraag2" id="vraag2" style="display:none;">' + 
       '<input type="textbox"></td> </td>' + 
       '</td> <td class= "vraag3" id="vraag3" style="display:none;">' + 
       '<input type="textbox"></td> </td>' + 
       '</td> <td class= "vraag4" id="vraag4" style="display:none;">' + 
       '<input type="textbox"></td> </td>' + 
       '</td> <td class= "vraag5" id="vraag5" style="display:none;">' + 
       '<input type="textbox"></td> </tr>'; 
      }); 
     $('#tabelddl').append(trHTML); 
     }, 

     complete: function(){ 
     } 
    }); 

Und hier ist die Tabelle

<table class="table" id="tabelddl"> 
<thead> 
    <tr> 
    <th class="col-lg-1" style="display:none;">opleiding_id</th> 
     <th class="col-lg-2" style="display:none;">relatie_id</th> 
     <th class="col-lg-2" style="display:none;">inschrijving_id</th> 
    <th class="col-lg-1" style="display:none;">naam_opleiding</th> 
     <th class="col-lg-1">achternaam</th> 
     <th class="col-lg-1">tussenvoegsel</th> 
     <th class="col-lg-1">voornaam</th> 
     <th class="col-lg-1" style="display:none;">vraag 1</th> 
     <th class="col-lg-1" style="display:none;">vraag 2</th> 
     <th class="col-lg-1" style="display:none;">vraag 3</th> 
     <th class="col-lg-1" style="display:none;">vraag 4</th> 
     <th class="col-lg-1" style="display:none;">vraag 5</th> 
    </tr> 
</thead> 
</table> 

Answer 1

.vraag1 ist Klassenname Ihrer td und es nicht val() haben, so können Sie dieses $(this).find(".vraag1 > input[type=text]").val();

$("document").ready(function(){ 
 

 
    $("#clickMe").click(function(){ 
 
     $('#tabelddl tbody tr').each(function() {  
 
      var cijfer1 = $(this).find(".vraag1 > input[type=text]").val(); 
 
      alert(cijfer1) 
 
     }) 
 
    }) 
 

 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tabelddl"> 
 
<tr> 
 
<td class="vraag1"> <input type="text"/></td> 
 
<td class="vraag2"> <input type="text"/></td> 
 
<td class="vraag3"> <input type="text"/></td> 
 
</tr> 
 
</table> 
 
<input type="button" value="clickMe" id="clickMe"/>

versuchen