Open a div according to your ID

Asked

Viewed 292 times

4

I have a menu that, when right-clicking, it opens in a DIV. Everything happens within a tr (line) of a table.

My problem is this, have a table with several tr, and each of them receives a ID. And I have also, several div each of them receives a ID equal to that of the tr. I need the javascript open the DIV with the same ID as the TR.

Example:

Right click on the tr id="1" to div class="menu_pai" id="1" opens.

Current code:

document.oncontextmenu = function () {
        return false;
    };

    $("tr").mousedown(function (e) {
        
        // Define a posição do menu
        $('.menu_pai').css({
            "margin-left": e.clientX,
            "margin-top": e.clientY
        }).show();
        
        // Exibe o menu
        if (e.button === 2) {
            $(".menu_pai").show(); 
        } else {
            $(".menu_pai").hide();
        }
    });
.menu_pai{
        display: none;
    }
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<table width="100%" border="1" >
    <tr  id="1">
        <td>ID:1</td>
        <td>Nome</td>
        <td>Idade</td>
    </tr>
    <tr id="2">
        <td>ID:2</td>
        <td>Nome</td>
        <td>Idade</td>
    </tr>
    <tr id="3">
        <td>ID:3</td>
        <td>Nome</td>
        <td>Idade</td>
    </tr>
</table>

<div class="menu_pai" id="1">
    <div class="menu">
      link 1
    </div>
</div>

<div class="menu_pai" id="2">
    <div class="menu">
        link 2
    </div>
</div>

<div class="menu_pai" id="3">
    <div class="menu">
        link 3
    </div>
</div>

  • There is a word missing in your question "I have a table with several ," "you get an ID equal to the one of .". Clean it up 'cause I couldn’t understand anything you want.

  • It was because I used hahaha tags, ready to go

  • change the word from java to javascript please

1 answer

6


First it is not advised to have equal id, id’s should be unique. Only class allows tags with equal class.
So step one I changed the id’s in the menu Ivs.
For example.:

From 1 to menu1.

At the time of showing the dynamic object I placed the choice of the object, so to show only the desired id.

$("#menu"+this.id).show();

Where this is the tr so this.id will be the id of tr.
After that it is necessary to hide all menus except the menu we just chose.

$(".menu_pai:not(#menu"+this.id+")").hide();

I hope it’s clear the changes I’ve made.
The jsfiddle I created.:
http://jsfiddle.net/q6jGr/171/

With the example given to disappear with the mouse.:
http://jsfiddle.net/q6jGr/178/

With the example of changing the color.:
http://jsfiddle.net/q6jGr/181/
Created the class selected for this purpose.

Firefox.:
I was able to replicate the clicks constriction but it is happening because the browser console is on, if closing the console no longer happens. (At least I could only have this constriction in this case). I found another constraint that was closing the menu when I shouldn’t have.
Corrected.:
http://jsfiddle.net/q6jGr/192/
What was happening is the event that has different properties instead of toElement gets relatedTarget.

  • perfect friend, thank you very much :)

  • can you make the menu close when the mouse is not on it? http://jsfiddle.net/q6jGr/172/

  • 1

    @Hugo Borges there is the example :D

  • Very good. ;) just one more thing now and the last, is it possible to put a background in the <tr> by right-clicking? so it is easy to know in which line the menu was opened.

  • friend detected a problem with firefox, does that by me help? The error and that have to click twice with right mouse button. http://jsfiddle.net/q6jGr/185/

  • also not advisable to have Ids started with numbers ;)

  • Is that the problem?

Show 2 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.