使用jQuery引用表單元格的值

Question

我有一個表，其中填充了頁面C＃模型中一定數量的TextBoxFor輸入。 這些輸入的每一列都有一個不同的類名。 在任何一個類上使用.change事件，更改后的單元格的行和單元格/列號用於標識該行正下方的單元格。 但是，更改后的單元格的值始終顯示為未定義。 我試過在SO中尋找答案，.val（）、. html（）、. text（），獲取更改后的單元格ID並對其應用.val（），但是對更改后的單元格的任何引用都是未定義的。 如何正確處理更改后的單元格？ 提前謝謝了！

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

這是表格的示例：

<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

您嘗試捕獲單元格更改，但是卻想捕獲文本框更改。

嘗試這樣的事情。

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