从下拉列表中选择选项后如何使行可编辑

Question

当我从下拉框中选择编辑选项时，我想让我的表格行可编辑。以前它工作得很好，但那次我在所有行内都使用了“编辑”按钮。但现在我通过放入下拉菜单制作了编辑按钮。但现在它不起作用。我无法在我的代码中找到任何错误，但它仍然无法正常工作。 我的 html 表是

    <div class="table-responsive">
          <table class="table table-hover"  id="myTable" >
            <thead>
              <tr>
                <th>Parameter Names</th>
                <th>Parameter Values</th>
                <th>Remarks</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>johncarter@mail.com</td>
                <td>John</td>
                <td>Carter</td>
                <td></td>
              </tr>
              <tr>
                <td>peterparker@mail.com</td>
                <td>Peter</td>
                <td>Parker</td>
                <td></td>
              </tr>

            </tbody>
          </table>
          <ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
            <li><a tabindex="-1" class="btn btn-mini btnEdit" >Edit</a></li>
          </ul>
    <script type="text/javascript">

        (function ($, window) {

            $.fn.contextMenu = function (settings) {

                return this.each(function () {

                    // Open context menu
                    $(this).on("contextmenu", function (e) {
                        //open menu
                        $(settings.menuSelector)
                            .data("invokedOn", $(e.target))
                            .show()
                            .css({
                                position: "absolute",
                                left: getLeftLocation(e),
                                top: getTopLocation(e)
                            })
                            .off('click')
                            .on('click', function (e) {
                                $(this).hide();

                                var $invokedOn = $(this).data("invokedOn");
                                var $selectedMenu = $(e.target);

                                settings.menuSelected.call(this, $invokedOn, $selectedMenu);
                        });

                        return false;
                    });

                    //make sure menu closes on any click
                    $(document).click(function () {
                        $(settings.menuSelector).hide();
                    });
                });

                function getLeftLocation(e) {
                    var mouseWidth = e.pageX;
                    var pageWidth = $(window).width();
                    var menuWidth = $(settings.menuSelector).width();

                    // opening menu would pass the side of the page
                    if (mouseWidth + menuWidth > pageWidth &&
                        menuWidth < mouseWidth) {
                        return mouseWidth - menuWidth;
                    } 
                    return mouseWidth;
                }        

                function getTopLocation(e) {
                    var mouseHeight = e.pageY;
                    var pageHeight = $(window).height();
                    var menuHeight = $(settings.menuSelector).height();

                    // opening menu would pass the bottom of the page
                    if (mouseHeight + menuHeight > pageHeight &&
                        menuHeight < mouseHeight) {
                        return mouseHeight - menuHeight;
                    } 
                    return mouseHeight;
                }
            };
        })(jQuery, window);

        $("#myTable td").contextMenu({
            menuSelector: "#contextMenu",
            menuSelected: function (invokedOn, selectedMenu) {
                var msg = "You selected the menu item '" + selectedMenu.text() +
                    "' on the value '" + invokedOn.text() + "'";
            }
        });
        function Save() {
    var par = $(this).parent().parent();
    var tdName = par.children("td:nth-child(1)");
    var tdPhone = par.children("td:nth-child(2)");
    var tdEmail = par.children("td:nth-child(3)");
    tdName.html(tdName.children("input[type=text]").val());
    tdPhone.html(tdPhone.children("input[type=text]").val());
    tdEmail.html(tdEmail.children("input[type=text]").val());

    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
};

function Edit() {
    var par = $(this).parent().parent();
    var tdParameterName = par.children("td:nth-child(1)");
    var tdParameterValues = par.children("td:nth-child(2)");
    var tdRemarks = par.children("td:nth-child(3)");
    var tdButtons="";
    tdParameterName.html("<input type='text' id='txtName' value='" + tdParameterName.html()
            + "'/>");
    tdParameterValues.html("<input type='text' id='txtPhone' value='" + tdParameterValues.html()
            + "'/>");
    tdRemarks.html("<input type='text' id='txtEmail' value='" + tdRemarks.html()
            + "'/>");
    tdButtons.html("<a class='btn btn-mini btnSave'>Save</a>");
    $(".btnSave").bind("click", Save);
    $(".btnEdit").bind("click", Edit);
};

function Delete() {
    var par = $(this).parent().parent();
    par.remove();
}; 


$(function() {
    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
});
        </script>

基本上我启用了右键菜单。单击右侧下拉框将打开。当我单击编辑按钮时，我的行将变得可编辑。我为 contextMenu 和编辑按钮添加了 jquery。很抱歉让代码很脏，但目前我正在练习，而且我也是新手。

Answer 1

查看控制台为您提供的输出。单击编辑导致TypeError: tdButtons.html is not a function 由两行产生：

var tdButtons="";

和

tdButtons.html("<a class='btn btn-mini btnSave'>Save</a>");

因此，您正在创建一个空字符串并尝试像使用 jQuery 对象一样使用它。您将需要更改这些行以使其再次工作。