Right menu in each row of a table

Question

Right menu in each row of a table

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (2 votes)
#4 by (-1 votes)

4

I have a table and I'm trying to create an action menu by right clicking on each row of the table.

It is partially working the problem that I can not make the script select the context menu for each line it is always catching the last.

I've created a fiddle to make it easier to test the script and I'll post the code below too:

<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 when I click on Robocop it will display the UL containing Bazuca and when clicking on Luke it will display Sabre de Luz .

javascript html context-menu

asked by anonymous 22.08.2014 / 22:53

4 answers

3

You can not use the same setting to define two different menus, you will have to create one for each different menu.

This is because the contextmenu uses a selector to set which menu to use, and you can not differentiate which menu will be used in a selector. View in the plugin code: jquery.ui-contextmenu.js line 124

One quick fix would be this: link

23.08.2014 / 00:07

2

Improving the @brasiofilo response, the process does not need additional classes besides the .table-context class in the table (Peoplee response) and per line, always picking up the last column as a context menu (answer Brasofilo). >

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

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

25.08.2014 / 14:49

-1

Simply remove :first-child from menu :

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

JsFiddle updated

22.08.2014 / 23:04

How to do the Facebook content upload technique? Error sort list?

score 4 · Accepted Answer

Using the @Peoplee , I adapted to automate the process like this:

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

I've set the ativar class to <td> 's Luke and Robocop , and the menu will be defined through a jQuery object using <ul> child of the second next(td) .

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

$('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><scripttype='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>