Wert der Referenztabellenzelle mit jQuery

Question

Ich habe eine Tabelle mit einer festgelegten Anzahl von TextBoxFor-Eingaben aus dem C# -Modell der Seite gefüllt. Jede Spalte dieser Eingaben hat einen eindeutigen Klassennamen. Bei Verwendung eines .change-Ereignisses für eine der Klassen wird die Zeile und die Zellen-/Spaltennummer der geänderten Zelle verwendet, um die Zelle in der Zeile direkt darunter zu identifizieren. Der Wert der geänderten Zelle wird jedoch immer als undefiniert angezeigt. Ich habe versucht, SO nach Antworten zu suchen, .val(), .html(), .text(), um die ID der geänderten Zelle abzurufen und .val() auf diesen Wert anzuwenden, aber jeder Verweis auf die geänderte Zelle ist nicht definiert. Wie adressiert man die veränderte Zelle richtig? Vielen Dank im Voraus!

jQuery:

$('.firstClass, .secondClass, .thirdClass, .fourthClass, .fifthClass').change(function() { 
    var $changedCell = $(this); 
    var $changedRow = $changedCell.parent().index(); 
    var $cellIndex = $changedCell.index(); 
    var $nextRow = $changedRow + 1; 
    var $table = $('#dt_myTable tr'); 
    var $beneathCell = $table.eq($nextRow).find('td').eq($cellIndex); 
    var $changedValue = Number($changedCell.val());//Zero or Undefined, depending on using .val() or .html()/.text()! 
    $beneathCell.text($changedValue); 
}); 

Hier ist ein Beispiel der Tabelle:

<table id="dt_myTable" class="table table-bordered"> 
    <thead> 
     <tr><th class="text-center">Suggested</th><th class="text-center">First</th><th class="text-center">Second</th><th class="text-center">Third</th><th class="text-center">Fourth</th><th class="text-center">Fifth</th></tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td align="center">Primary</td> 
      <td class="firstClass" align="center">@Html.TextBoxFor(m => m.FirstPrimary, new { @class = "form-control", data_parsley_required = "true" })</td> 
      <td class="secondClass" align="center">@Html.TextBoxFor(m => m.SecondPrimary, new { @class = "form-control", data_parsley_required = "true" })</td> 
      <td class="thirdClass" align="center">@Html.TextBoxFor(m => m.ThirdPrimary, new { @class = "form-control", data_parsley_required = "true" })</td> 
      <td class="fourthClass" align="center">@Html.TextBoxFor(m => m.FourthPrimary, new { @class = "form-control", data_parsley_required = "true" })</td> 
      <td class="fifthClass" align="center">@Html.TextBoxFor(m => m.FifthPrimary, new { @class = "form-control", data_parsley_required = "true" })</td> 
     </tr> 
     <tr> 
      <td align="center"><b>Result</b></td> 
      <td class="firstClass" align="center"></td> 
      <td class="secondClass" align="center"></td> 
      <td class="thirdClass" align="center"></td> 
      <td class="fourthClass" align="center"></td> 
      <td class="fifthClass" align="center"></td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

Sie fangen Zellenwechsel versucht, aber sie sould ändern fangen Textbox.

versuchen Sie etwas wie das.

$('.firstClass input, .secondClass input, .thirdClass input, .fourthClass input, .fifthClass input').change(function() { 
var $changedInput = $(this); 
var $changedCell = $changedInput.parent(); 
var $changedRow = $changedCell.parent().index(); 
var $cellIndex = $changedCell.index(); 
var $nextRow = $changedRow + 1; 
var $table = $('#dt_myTable tr'); 
var $beneathCell = $table.eq($nextRow).find('td').eq($cellIndex); 
var $changedValue = Number($changedInput.val());//Undefined! 
$beneathCell.text($changedValue); 
});