How to create a context menu based on the row selection in JavaScript

I am having some difficulties in creating a contextmenu in Javascript..
I need a context menu to be displayed based on the row selection in a grid.. Some rows have defaultt values that need to be displayed and some dont...
So I need a javascript that iterate through all the rows selected and then take their values and display the context menu accordingly...

Can anyone help me in this regard?
sonaku2003Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

gops1Commented:
Check this out:

<html>
      <title>Script Demo Gops</title>
      <head>
            <script language="JavaScript">
                  var mozilla=document.getElementById && !document.all
                  var ie=document.all

                  if (mozilla){
                        document.addEventListener("contextmenu", displaymenu, true)
                        document.addEventListener("click", hidemenu, true)
                  }else if (ie){
                        document.attachEvent("oncontextmenu", displaymenu)
                        document.attachEvent("onclick", hidemenu)
                  }

                  function iebody(){
                        return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
                  }

                  function displaymenu(e){
                        var target=window.event?window.event.srcElement:e.target;
                        while(target.tagName!='TR'){
                              target=target.parentNode;
                        }
                        var str="";
                        for(var i=0;i<target.cells.length;i++){
                              str+="For Row "+(target.rowIndex+1)+ " Column " +(i+1)+" :"+ (target.cells[i].childNodes[0].nodeValue)+"<br>";
                        }
                        document.getElementById('context_menu').innerHTML=str;
                        el=document.getElementById("context_menu")
                        contextisvisible=1
                        if (mozilla){
                              el.style.left=pageXOffset+e.clientX+"px"
                              el.style.top=pageYOffset+e.clientY+"px"
                              el.style.visibility="visible"
                              e.preventDefault()
                              return false
                        }else if (ie){
                              el.style.left=iebody().scrollLeft+event.clientX
                              el.style.top=iebody().scrollTop+event.clientY
                              el.style.visibility="visible"
                              return false
                        }
                  }

                  function hidemenu(){
                        if (typeof el!="undefined" && contextisvisible){
                              el.style.visibility="hidden"
                              contextisvisible=0
                        }
                  }

            </script>
      </head>
<body>
<div id="context_menu" style="width:350px;border:1px solid black;background-color:#EEEEEE;font-size:xx-small;visibility:hidden;position:absolute;padding-left: 10px">
</div>
<table cellpadding="2" cellspacing="1" border="1" width="500" style="font-family:verdana;font-size:xx-small;">
      <tr>
            <td>And perhaps the most eloquent stat that sums up play in the first part of the</td>
            <td>And in that score, Sanath Jayasuriya who, on the day, equaled Sachin Tendulkar</td>
      </tr>
      <tr>
            <td>Ajaybhai Patel is a worried man. His son's standard XII board examinations begin on March 25 </td>
            <td>That is the first surprise -- the fact that a family is more interested in allowing Parthiv to relax instead of taxing him.</td>
      </tr>
</table>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BadotzCommented:
<$.02>Don't forget to "unattach" the event handlers (to prevent memory leaks)</$.02>
0
sonaku2003Author Commented:
Gosp1,
Thanks for your reply

Your approach works fine... But I need something like this.... I have a grid, each and every row in it has some hidden values that are to be displayed in the context menu...

For instance Row1 has "print, cut, copy"
                     Row2 has "open,download"
Upon the selection of rows, javascript has to iterate through all the selected rows , and take those values and create a context menu dynamically..  Sometimes user may select mutple rows too...

Can you help me in this...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.