Javascript 在表格的最后一行（链接）显示菜单，并在单击菜单项时显示模式窗口

我已经审阅了下面的文章，

我也有类似的要求，但对这些技术来说还很陌生。。！ 我的要求是，我将在每一行的末尾有一个超链接，现在点击/悬停->我想显示一个下拉菜单->用户可以从菜单项->中选择任何选项，这将向我显示一个模式窗口，其中包含特定于所选行的一些来自后端系统的表单或数据

例如：我想修改其中一行的内容，我将点击该行末尾的超链接，这将带我进入模态窗口，在那里我应该能够更改、保存并关闭模态窗口

我对上面的代码做了如下更改：， 在html中：

这适用于悬停在最后一行第3行，但我应该能够显示菜单和点击菜单项我想显示模态窗口

如果有与我的要求类似的文章/帖子，请联系我。请帮助我解决此问题

---

tnx，saps

当我在中测试代码时。。没有显示任何内容。。！我也需要添加任何html内容吗？你必须包括模式css和JS，但我有以下问题：1当我单击“编辑”时，它应该显示3个链接，但它会重复，最后一个只显示3个链接2当我单击第一个链接时，对话框会打开，但我希望对话框3上的所选表行索引详细信息与第2点相同，当我单击编辑记录链接时，所选表行的索引值应该传递到模式窗口！请在上述问题上给予帮助！为链接指定不同的id，然后使用这些id标识编辑注释并相应地保存更新

$('#mytable').on ('mouseenter', 'td', function () {
var top = 0;
var left = 0;
var id = "#" + this.id;   

//currTemplateRow = obj.parentElement.parentElement;
var pos = $(id).position();
top = pos.top - 5;
left = pos.left - 5;

$("#menu").text ('Menu for TD ' + this.id); 

$("#menu").css(
        { position: "absolute",
            top: top + "px",
            left: left + "px"
        }
    ).show(); 
//list of menu item  
// modal-form content for modal
  $("menu-item").click(function(){
      $('<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">' + modalform + '</div>').modal().on('shown', function ()
            {  
                //callback function
                 return false;
             });
});
});

$('#mytable').on ('mouseleave', 'td', function () {
    $("#menu").hide();
 });

$('#mytable').on ('mouseenter', 'td', function () {
    var top = 0;
    var left = 0;
    var id = "#" + this.id;   

    //currTemplateRow = obj.parentElement.parentElement;
    var pos = $(id).position();
    top = pos.top - 5;
    left = pos.left - 5;

    $("#menu").text ('Menu for TD ' + this.id); 

    $("#menu").css(
            { position: "absolute",
                top: top + "px",
                left: left + "px"
            }
        ).show();  
});

$('#mytable').on ('mouseleave', 'td', function () {
    $("#menu").hide();
});

$('#mytable').on ('mouseenter', 'td', function () {
var top = 0;
var left = 0;
var id = "#" + this.id;   

//currTemplateRow = obj.parentElement.parentElement;
var pos = $(id).position();
top = pos.top - 5;
left = pos.left - 5;

$("#menu").text ('Menu for TD ' + this.id); 

$("#menu").css(
        { position: "absolute",
            top: top + "px",
            left: left + "px"
        }
    ).show(); 
//list of menu item  
// modal-form content for modal
  $("menu-item").click(function(){
      $('<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">' + modalform + '</div>').modal().on('shown', function ()
            {  
                //callback function
                 return false;
             });
});
});

$('#mytable').on ('mouseleave', 'td', function () {
    $("#menu").hide();
 });