我参考了下面的文章,克隆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();
});