Capture and change the value of a column of your respective row in a table with numerous rows

Asked

Viewed 911 times

3

#1

The future table data will be shown through the code below:

<?php
while($linhaAssociativa = mysqli_fetch_assoc($query))
            { ?>
<tr>
  <td class="cmenu2"><?php echo $linhaAssociativa["CommonName"]; ?></td>
  <td><?php echo $linhaAssociativa["RealAddress"]?></td>
  <td><?php echo $linhaAssociativa["BytesSent"]?></td>
  <td><?php echo $linhaAssociativa["BytesReceived"]?></td>
  <td><?php echo $linhaAssociativa["VirtualAddress"]?></td>
  <td><?php echo $linhaAssociativa["Since"]?></td>
  <td><?php echo $linhaAssociativa["Status"]?></td>
</tr>
<?php
            } ?>

Where each line is one client and has a status column(is the last column of each row) with the value 0 or 1.

#2

I’m wearing a plugin of contextmenu to create a menu Lock/Unlock by clicking on the first column of each row and a plugin of confirm by clicking lock (image 3).

#3

What I’m trying to do: when right-clicking on a line, if the option is block off the status it was 0 will turn 1, case unlock 1 will turn 0. Later I’ll get the information from td that will save the value of status (0 or 1) and play in a database - but this is apparently easy. What I can’t do: If I right click on Garret Winters the plugin contextmenu will open and if clicked on lock, 0 will turn 1. However I do not know repeat the logic for all other lines (Winters and all other lines below).

The code of functions:

$(function() {
    $.contextMenu({
        selector: 'NOME DO SELETOR', 
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m); 
        },
        items: {
            "bloquear": {name: "Bloquear", icon: "edit"},
            "desbloquear": {name: "Desbloquear", icon: "cut"},


        }
    });

    $('.context-menu-one').on('click', function(e){
        console.log('clicked', this);
    })    
});

And

$.confirm({
    title:"Você tem certeza?",
    content:"Você REALMENTE tem certeza que quer bloquear este cliente?",
    confirmButton: 'Eu quero',
    cancelButton: 'Não, nunca!',
    confirm: function(){
      $.alert('Ok... Como o senhor quiser');
    }
  });

Trying to make it as clear as possible - Let’s say the table has 10 rows, and each row contains a NAME column and a STATUS column (by default with value 0). If I click on the first line with the right button and go on lock, it will change the STATUS (the class td cmenu2) to 1. HOWEVER if I put the second row td also as cmenu2 class and try to apply logic as I showed in photos/code, and right-click on line two, go on lock, it will change the status of line one and not of the two!

php javascript jquery

  • The selector used is the class .cmenu2?

  • @Eduardoalmeida Then, inside the while, where it is created tr and td’s, the last td has as class cmenu2. Only if all rows (are more than 200 rows) have the last column (Status) as class cmenu2, when right-clicking and going to lock, it will change the value from 0 to 1 in all columns Status and all rows..

  • For me it worked correctly. The problem may be the use with the Datatables plugin.

  • @Eduardoalmeida what exactly worked for you brother? See again what I’m not able to do... I don’t think I can explain it better.

  • "But I don’t know how to repeat the logic for all the other lines". It worked like .context-menu-one, https://swisnl.github.io/jQuery-contextMenu/demo.html

  • I entered the code I used for testing. In all rows generated the context menu appears when I right-click.

Show 1 more comment

1 answer

0

I used the Sakila database samples from Mysql.

In the script below, the last column has a context menu. When you click on it, you will see the options to lock and unlock. Finally, when you click on the desired option, the value of it will be shown, then you can do whatever you want with it.

Tip: make good use of the functions callback available in the plugin.

<?php
include 'conexao.php';

$query = 'select first_name, last_name from sakila.actor limit 10';

$result = mysqli_query($db, $query);
?>
<!DOCTYPE html>
<html>
    <head>
        <title>:: Login</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.0/jquery.contextMenu.min.css">
    </head>
    <body>
        <div class="container">
            <div class="col-sm-5" id="login-container">
                <table class="table table-condensed table-bordered">
                    <?php
                    while ($r = mysqli_fetch_array($result)) {
                    ?>
                        <tr>
                            <td><?php echo $r['first_name']; ?></td>
                            <td class="context-menu-one"><?php echo $r['last_name']; ?></td>
                        </tr>
                    <?php
                    }
                    ?>
                </table>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.0/jquery.contextMenu.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.0/jquery.ui.position.min.js"></script>
        <script>
            $(function () {
                
                function createSomeMenu() {
                    return {
                        callback: function(key, options) {
                            var m = "clicked: " + key;
                            window.console && console.log(m) || alert(m);
                        },
                        items: {
                            "bloquear": {name: "Bloquear", icon: "edit"},
                            "desbloquear": {name: "Desbloquear", icon: "cut"}
                        }
                    };
                }
                
                $('.context-menu-one').on('mouseup', function(e){
                    var $this = $(this);
                    // store a callback on the trigger
                    $this.data('runCallbackThingie', createSomeMenu);
                    var _offset = $this.offset(),
                        position = {
                            x: _offset.left + 10, 
                            y: _offset.top + 10
                        }
                    // open the contextMenu asynchronously
                    setTimeout(function(){ $this.contextMenu(position); }, 1000);
                });

                // setup context menu
                $.contextMenu({
                    selector: '.context-menu-one',
                    trigger: 'none',
                    build: function($trigger, e) {
                        // pull a callback from the trigger
                        return $trigger.data('runCallbackThingie')();
                    }
                });
            });
        </script>
    </body>
</html>

The code was as can be seen. I took no precaution with PHP, because the goal was to bring the database data.

  • Ok. And how do I capture the value of td of the line I right click and click lock according to all the images and code I sent? This is what I can’t do.

  • If in the table there are 10 rows, and in each row there is a column called NAME and a column called STATUS. Status by default is 0 (UNLOCKED). If I right click on the first line and go to lock, the status of the first name will go to 1 and the other 9 lines remain intact. However, with the code I put, if in the 10 lines, in the STATUS column I put as class cmenu2 and call that function, it will ALWAYS change the td of the first line, regardless of which line I click with the right.

  • I edited my question to try to make it as clear as possible.

  • I edited the code with the example of the site (Jquery contextmenu documentation). https://swisnl.github.io/jQuery-contextMenu/demo/async-create.html

  • follows the following html <tr>&#xA; <td>first_name</td>&#xA; <td class="context-menu-one">0</td>&#xA; </tr>&#xA; <tr>&#xA; <td>some_name</td>&#xA; <td class="context-menu-one">1</td>&#xA; </tr> The first tr has the second td as 0. The second tr has the second td as the value 1. When I click lock on the first tr-second td, how do I display "0"? When I click lock on the second tr how do I display "1"?

Browser other questions tagged php javascript jquery

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