Question

我正在构建一个用户可以添加，删除或编辑的动态表。我有以下内容：

$(document).on('click', '.edit_rule', function() {
    // editable text boxes for name and description
    $(this).closest("tr").find("td:nth-child(2), td:nth-child(3)").each(function() {
        var html = $(this).html();
        var input = $('<input type="text" />');
        input.val(html);
        $(this).html(input);
    });

    // replace Edit and Delete with Save and Cancel
    $(".edit_rule").replaceWith("<input id='Button' type='button' value='Save' class='sav$
    $(".delete_rule").replaceWith("<input id='Button' type='button' value='Cancel' class=$

});

一切正常。但是，当我尝试在下一个框中访问新值时，该值将显示为空白。我试图使用.val（），现在尝试.text（）如下：

$(document).on('click', '.save_edit', function() {
    var $row = $(this).closest("tr");
    var $name = $row.find("td:nth-child(2)").find('input');
    console.log($name.text()); // prints empty string
});

我对Javascript相当新，所以是否有一些奇怪的范围我不理解会阻止在单独的函数中访问该值？还有其他办法吗？

编辑：这是相应的HTML

<div id="customperms_table_container" style="height:655px;">
    <table id="customperms_table_form" cellpadding="10" cellspacing="$
        <caption></caption>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Role Name</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
    </table>
</div>

Answer 1

问题是td没有价值。
解决方案是使用.text()或.html()来获取其文字或html

基于评论：

你的选择器应该是：

var $name = $row.find("td:nth-child(2)").find('input')// add class or id if there other inputs

Answer 2

抱歉打破了html，但是guradio和Haze的组合修复了它。

var $name = $row.find("td:nth-child(3)");
console.log($name.val()); // <-- prints correct value

jQuery：无法使用.val（）

2 个答案: