在表格行中找到它後顯示文本框的值

我在表格中有很多文本框。所有的文本框都填充了數據。我爲所有文本框附加了一個keyup事件處理函數，現在我想要在引發keyup事件的地方獲取錶行引用。我的代碼無法正常工作。我沒有從saveToLocalStore函數獲取文本框值。這裏是我的代碼：在表格行中找到它後顯示文本框的值

<table class="webgrid-table"> 
    <tr> 
     <input type="text" value="Testing1" id="Students_0__FirstName"> 
    </tr> 
    <tr> 
     <input type="text" value="Testing2" id="Students_1__FirstName"> 
    </tr> 
    <tr> 
     <input type="text" value="Testing3" id="Students_2__FirstName"> 
    </tr> 
</table>

$(document).ready(function() { 
    jQuery(document).on('keyup', 'input[type=text]', function (ev) { 
     alert($(this).val()); 
     var tableRow = $(this).closest('tr'); 
     saveToLocalStore(tableRow); 
    }); 
}); 

function saveToLocalStore(tableRow) { 
    alert('ppp'); 
    var FirstName = tableRow.find("input[id*='FirstName']").val(); 
    alert(FirstName); 
}

的alert($(this).val());被返回正確的文本框的值，但警告不從saveToLocalStore工作。代碼中有什麼問題？

這裏就是複製了這一問題的的jsfiddle：https://jsfiddle.net/tridip/fmdu7xbq/1/

來源

2016-01-19 Thomas

您有無效的HTML因此DOM可能會是相當不同的比你希望它是; ''元素可能在「

」和「」元素的內部或外部。「」或「」的有效子元素。例如，在Chrome中，「」元素被移動到「

」以外的任何元素都不是「

」之前;其他瀏覽器可能會有不同反應。爲了解決這個問題：修復HTML，並用''或'

'元素包裝''元素。 –

對不起，我匆忙編碼HTML，這就是爲什麼有問題。 – Thomas

回答

你的HTML是無效的，因爲只有td和th元素可以是tr直接孩子。這意味着您的input元素正在表格外渲染，因此find()未檢索到您期望的元素。如果您修復HTML，你的代碼工作：

<table class="webgrid-table"> 
    <tr> 
     <td> 
      <input type="text" value="Testing1" id="Students_0__FirstName"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="text" value="Testing2" id="Students_1__FirstName"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="text" value="Testing3" id="Students_2__FirstName"> 
     </td> 
    </tr> 
</table>

Example fiddle

來源

2016-01-19 16:07:59

對不起，我匆忙編碼HTML，這就是爲什麼有問題。我的程序中的 – Thomas

我也是這麼做的。 onkey顯示正確的編輯值，但我從onkey顯示舊值的功能。無法複製。所以這可能是什麼問題......任何猜測？有東西可以緩存？ – Thomas

此行返回舊值'var FirstName = tableRow.find（「input [id * ='FirstName']」）.val（）;'from saveToLocalStore function。 – Thomas

相關問題