Open a div according to your ID

Question

Open a div according to your ID

Navigation

#1 by (6 votes)

4

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

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

Example:

Right clicking on 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><tablewidth="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>

javascript html jquery css

asked by anonymous 13.04.2016 / 13:51

1 answer

Gps or antenna triangulation - How to know the accuracy of the location? Larger and smaller number

score 6 · Accepted Answer

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

From 1 to menu1.

At the time of displaying the object I placed a dynamic object's choice, thus to show only the desired id.

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

Where this is the tr so this.id will be the id of the tr. After this you have to hide all the menus except the menu that we just choose.
$(".menu_pai:not(#menu"+this.id+")").hide();

I hope the changes I made are clear. The jsfiddle I created:
link

With the example given to disappear with the mouse:
link

With the example of changing the color:
link
Created the class selected for the purpose.

Firefox .:
I was able to replicate the click constraint but it happens because the browser console is turned on, closing the console no longer happens. (At least I could only have this constraint in this case). I found another shortcoming that was closing the menu when it should not. Fixed:
link Home What was happening is the event that has different properties instead of toElement gets relatedTarget.