Right menu in each Row of a table

Question

I have a table and am trying to create an action menu by right clicking on each Row of the table.

It’s partially working the problem that I can’t make the script select the context menu for each row it’s always picking up the last one.

I created a fiddle to facilitate the testing of the script and I will post the code below as well:

<style type="text/css">
    .skills {
        background: #A6A6A5;
        padding: 20px;
    }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        $("table").contextmenu({
            delegate: "tbody tr",
            menu: ".table tbody tr .skills:first-child"
        });
    });
</script>

<h1>Shao Kan Game World</h1>

<!-- Os dados na tabela são ficticios e nao tem intencao de insultar os personagens -->

<table class="table table-bordered table-hover table-striped" style="width: 500px; margin: 0 auto;">
    <thead>
        <tr>
            <th>Personagem</th>
            <th>Poder</th>
            <th>Actions</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Luke</td>
            <td>Espadinha</td>
            <td class="skills">
                <ul class="skills" style="display: none; z-index: 4000;">
                    <li>SABRE DE LUZ</li>
                </ul>
            </td>
        </tr>

        <tr>
            <td>Robocop</td>
            <td>Metralhadora</td>
            <td class="skills">
                <ul class="skills" style="display: none; z-index: 4000;">
                    <li>BAZUCAAAA</li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

What I need is to click on the Robocop it display the UL containing Bazuca and when clicking on the Luke he display the Sabre de Luz.

Answer 1

Using the example from @Peoplee, I adapted to automate the process so:

$('td.ativar').each(function(){
    $(this).contextmenu({
        menu: $(this).next().next().children('ul') // podemos usar jQuery aqui
    });
});

I put the class ativar us <td>'s Luke and Robocop, and the menu will be set via a jQuery object using the <ul> son of the second next(td).

Obs.: the class skills is being used in the <td> and in the <ul> and this seems problematic. I removed from <td> in my case.

$('td.ativar').each(function(){
  $(this).contextmenu({
    menu: $(this).next().next().children('ul')
  });
});

.skills {
    background: #A6A600;
    padding: 20px;
}

<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">  
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type='text/javascript' src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script type='text/javascript' src="http://wwwendt.de/tech/demo/jquery-contextmenu/jquery.ui-contextmenu.js"></script>
    
  <h1>Shao Kan Game World</h1>

<table class="table table-bordered table-hover table-striped" style="width: 500px; margin: 0 auto;">
    <thead>
        <tr>
            <th>Personagem</th>
            <th>Poder</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='ativar'>Luke</td>
            <td>Espadinha</td>
            <td>
                <ul class="skills" style="display: none; z-index: 4000;">
                    <li>SABRE DE LUZ</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td class='ativar'>Robocop</td>
            <td>Metralhadora</td>
            <td>
                <ul class="skills" style="display: none; z-index: 4000;">
                    <li>BAZUCAAAA</li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

Answer 2

You cannot use the same setting to set two different menus, you will have to create one for each different menu.

This is because the contextmenu uses a selector to define which menu will be used, and there is no way you can tell which menu will be used in a selector. See the plugin code: jquery.ui-contextmenu.js line 124

A quick fix would be this: http://jsfiddle.net/0t9e19rp/2/

Answer 3

Improving @brasofilo’s response, the process does not need additional classes beyond the class .table-context in the table (answer Peoplee) and by row, always taking the last column as context menu (answer Brasofilo).

$(".table-context tbody tr").each(function() {
    var element = $(this);

    element.contextmenu({
       menu: element.children("td:last").children("ul")
    });
});

Answer 4

Simply remove :first-child in menu:

$(document).ready(function () {
    $("table").contextmenu({
        delegate: "tbody tr",
        menu: ".table tbody tr .skills"
    });
});

Jsfiddle updated