Context Menu on dynamic HTML table

[ZachS]

I have a context menu. code is following....\[code\] <div class="contextMenu" id="myMenu1"> <ul> <li id="edit">Edit</li> <li id="cancel">Cancel</li> </ul> </div>\[/code\]JQuery Code for context menu: \[code\] $('#tblMain').contextMenu('myMenu1', { bindings: { 'edit': function (t) { //debugger; //alert('Trigger was ' + t.id + '\nAction was Edit'); //$("#myMenu1").hide(300); }, 'cancel': function (t) { //alert('Trigger was ' + t.id + '\nAction was Cancel'); //$("#myMenu1").hide(300); } } });\[/code\]Separate Jscript file contains code...\[code\] (function ($) { debugger; var menu, shadow, trigger, content, hash, currentTarget; var defaults = { menuStyle: { listStyle: 'none', padding: '1px', margin: '1px', backgroundColor: '#87CEEB', border: '1px solid #000080', width: '100px' }, itemStyle: { margin: '0px', color: '#000', display: 'block', cursor: 'default', padding: '3px', border: '1px solid #fff', backgroundColor: 'transparent' }, itemHoverStyle: { border: '1px solid #0a246a', backgroundColor: '#b6bdd2' }, eventPosX: 'pageX', eventPosY: 'pageY', shadow: true, onContextMenu: null, onShowMenu: null}; $.fn.contextMenu = function (id, options) { if (!menu) { // Create singleton menu menu = $('<div id="jqContextMenu"></div>') .hide() .css({ position: 'absolute', zIndex: '500' }) .appendTo('body') .bind('click', function (e) { e.stopPropagation(); }); } if (!shadow) { shadow = $('<div></div>') .css({ backgroundColor: '#000', position: 'absolute', opacity: 0.2, zIndex: 499 }) .appendTo('body') .hide(); } hash = hash || []; hash.push({ id: id, menuStyle: $.extend({}, defaults.menuStyle, options.menuStyle || {}), itemStyle: $.extend({}, defaults.itemStyle, options.itemStyle || {}), itemHoverStyle: $.extend({}, defaults.itemHoverStyle, options.itemHoverStyle || {}), bindings: options.bindings || {}, shadow: options.shadow || options.shadow === false ? options.shadow : defaults.shadow, onContextMenu: options.onContextMenu || defaults.onContextMenu, onShowMenu: options.onShowMenu || defaults.onShowMenu, eventPosX: options.eventPosX || defaults.eventPosX, eventPosY: options.eventPosY || defaults.eventPosY }); var index = hash.length - 1; $(this).bind('contextmenu', function (e) { // Check if onContextMenu() defined var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true; if (bShowContext) display(index, this, e, options); return false; }); return this;};function display(index, trigger, e, options) { var cur = hash[index]; content = $('#' + cur.id).find('ul:first').clone(true); content.css(cur.menuStyle).find('li').css(cur.itemStyle).hover( function () { $(this).css(cur.itemHoverStyle); }, function () { $(this).css(cur.itemStyle); }).find('img').css({ verticalAlign: 'middle', paddingRight: '2px' }); // Send the content to the menu menu.html(content); // if there's an onShowMenu, run it now -- must run after content has been added // if you try to alter the content variable before the menu.html(), IE6 has issues // updating the content if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu); $.each(cur.bindings, function (id, func) { $('#' + id, menu).bind('click', function (e) { hide(); func(trigger, currentTarget); }); }); menu.css({ 'left': e[cur.eventPosX], 'top': e[cur.eventPosY] }).show(); if (cur.shadow) shadow.css({ width: menu.width(), height: menu.height(), left: e.pageX + 2, top: e.pageY + 2 }).show(); $(document).one('click', hide);}function hide() { menu.hide(); shadow.hide();}// Apply defaults$.contextMenu = { defaults: function (userDefaults) { $.each(userDefaults, function (i, val) { if (typeof val == 'object' && defaults) { $.extend(defaults, val); } else defaults = val; }); } }; })(jQuery); $(function () { $('div.contextMenu').hide(); });\[/code\]Dynamic Table structure is following:\[code\] <table cellpadding="1px" cellspacing="1px" style="border: 1px solid blue; text-align: center;"> <thead> <tr> <td> Logic Id </td> <td> Sql Statement </td> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> Select * from my table </td> </tr> <tr> <td> 2 </td> <td> Select * from my table </td> </tr> <tr> <td> 3 </td> <td> Select * from my table </td> </tr> <tr> <td> 4 </td> <td> Select * from my table </td> </tr> <tr> <td> 5 </td> <td> Select * from my table </td> </tr> <tr> <td> 6 </td> <td> Select * from my table </td> </tr> <tr> <td> 7 </td> <td> Select * from my table </td> </tr> </tbody> </table>\[/code\]I want to display the context menu only for the "Sql Statement" column. Right now if i click on the table anywhere, context menu pops up. It should display only If with sql statement is clicked(only for second column). Please help....!!! Kapil