Question

我已经审阅了下面的文章， Cloning Html Table Row and Showing DIV Menu http://jsfiddle.net/skram/9hNQU/3/

我有类似的要求，但这些技术还不是很新...... 我的要求是，我会在每行的末尾有一个超链接，现在点击/悬停 - ＆gt;我想显示下拉/下拉菜单 - ＆gt;用户可以从菜单项中选择任何选项 - ＆gt;这应该显示一个模态窗口，其中包含一些特定于所选行的表格或数据（来自后端系统）！

对于ex：我想修改其中一行内容，我会点击行末尾的超链接，这应该带我到模态窗口，我应该可以更改，保存和关闭模态窗口！

我对上面的代码进行了更改，比如在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();
});

这可以在最后一行（Row3）上悬停，但我应该能够显示菜单并在菜单项上点击我想要显示模态窗口！

如果有任何类似于我的要求的文章/主题，请转介我。帮助我解决这个问题！

tnx，saps

Answer 1

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

在表格最后一行（链接）中显示菜单并在单击菜单项目时显示模态窗口

1 个答案: