在表格行

Question

表格中有很多文字框。所有文本框都填充了数据。我将一个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/

Answer 1

您的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