參考表單元格的值使用jQuery

Question

我有一個表格填充了來自該頁面的C＃模型的一組TextBoxFor輸入。這些輸入的每一列都有不同的類名。在任何一個類上使用.change事件，使用已更改的單元格的行和單元格/列號來標識其正下方行中的單元格。但是，更改的單元格的值始終顯示爲未定義。我嘗試過搜索答案，.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); 
});