Reference Table Cell's Value using jQuery

Question

I have a table populated with a set number of TextBoxFor inputs from the page's C# Model. Each column of these inputs has a distinct class name. Using a .change event on any one of the classes, the changed cell's row and cell/column number are used to identify the cell in the row directly beneath it. The value of the changed cell, however, is always showing up as undefined. I've tried searching SO for answers, .val(), .html(), .text(), getting the changed cell's ID and applying .val() to that, but any reference to the changed cell is undefined. How does one properly address the changed cell? Many thanks in advance!

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);
});

Here's a sample of the table:

<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

you trying catch cell change but you sould catch textbox change.

try something like this.

$('.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);
});