利用jquery右键菜单巧妙获取table的每行数据的id执行方法

现在的位置: 首页 > 综合 > 正文

利用jquery右键菜单巧妙获取table的每行数据的id执行方法

2013年09月11日 ⁄ 综合 ⁄ 共 1769字 ⁄ 字号小中大 ⁄ 评论关闭

今天想在table的表格上针对每行数据能进行右键菜单操作，根据不同的要求调用不同的方法，比如右键显示详细信息，修改之类的操作，但是jquery有点击右键的方法，但是没有获取每行数据，然后进行操作的方法。所以想了个折中的方法，在鼠标划入table的数据行的时候，触发事件，获取当前行的数据把它放到隐藏域中，然后再点击右键触发事件的时候，从隐藏域中获取参数，大致思路就是这样的

参考：http://junper.javaeye.com/blog/789969

自己写的代码；<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <mce:script src="script/jquery-1.4.3.js" mce_src="script/jquery-1.4.3.js" type="text/javascript"></mce:script> <mce:script type="text/javascript" src="script/jquery.contextmenu.r2.packed.js" mce_src="script/jquery.contextmenu.r2.packed.js"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">table { width:500px; height:400px }</style> <mce:script type="text/javascript"></mce:script> </head> <body> <div class="contextMenu" id="myMenu1"> <ul> <li id="factory"><img src="folder.png" mce_src="folder.png" /> Open</li> <li id="email"><img src="email.png" mce_src="email.png" /> Email</li> <li id="save"><img src="disk.png" mce_src="disk.png" /> Save</li> <li id="close"><img src="cross.png" mce_src="cross.png" /> Close</li> </ul> </div> <table > <thead> <tr> <td></td> <td> </td> </tr> </thead> <tbody> <tr id="1"> <td> 1</td> <td>2</td> </tr> <tr id="2"> <td> 3</td> <td>4 </td> </tr> </tbody> <tfoot></tfoot> </table> <input id="hide1" type="hidden" value="" /> </body> </html>

【上篇】MyEclipse 6.5GA发布了
【下篇】自学.NET之路-C#编程之基础总结

作者: publicist

该日志由 publicist 于11年前发表在综合分类下，最后更新于 2013年09月11日.
转载请注明: 利用jquery右键菜单巧妙获取table的每行数据的id执行方法 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

利用jquery右键菜单巧妙获取table的每行数据的id执行方法

作者: publicist

书签

最新文章New

本站推荐

返回首页