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

Show a Menu in Table Last Row (Link) and Display a Modal Window on click on menu items

本文关键字：显示 单击 菜单项 窗口 模式 最后 表格 链接 一行 菜单      更新时间：2024-01-27

我参考了下面的文章，克隆Html表行并显示DIV菜单http://jsfiddle.net/skram/9hNQU/3/

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

例如：我想修改其中一行的内容，我会点击行末尾的超链接，这应该会把我带到模式窗口，在那里我应该可以更改、保存和关闭模式窗口！

我对上面的代码进行了更改，在html:中

<td id="mytd1"><a href="">Row 1</a></td>

js:

$('#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();
});

这适用于悬停在最后一行（第3行），但我应该能够显示菜单并点击我想要显示模式窗口的菜单项！

如果有任何与我的要求类似的文章/线索，请联系我。。帮我解决这个问题！

tnx，saps

$('#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();
 });
相关文章：