用 n 行更改一行的值 (jquery, php, mysql)

Question

当我点击 "lock" 时，我只希望我点击的行将状态更改为 true 并锁定锁。当我点击 "unlock" 时，我只想要我点击的行将状态更改为 false 并释放锁定。

在我当前的代码中：

当我点击第一行的锁时，你的状态改变了，锁也改变了，但其他行的锁也改变了。我需要帮助来解决这个问题。
还有一个我觉得应该用的东西ajax。当第一次生成并执行 table 时，所有状态都将为假，锁 "open" 将行标记为锁定（锁定）状态将使状态为真，我需要发送这个 "true" pro 数据库并通过 php 脚本保存它，以便重新加载我更改的页面状态继续保存。

我正在使用以下插件上下文菜单：为了更好的可视化，我把我的代码放在了 pastebin 中。

change.js

$(function(){
  $.contextMenu({
    selector: '.context-menu-one',

    items: {
      "block": {
        name: "Lock",
        icon: "edit",
        callback: function(key, options){
          var m = $(this).text();
          var set = block(m, $(this)); // passando  - this - como parâmetro de função


        }
      },
      "sep1": "----------",
      "unblock": {
        name: "Unlock",
        icon: "cut",
        callback: function(key, options){
          var m = $(this).text();
          var set = unblock(m, $(this)); // passando  - this - como parâmetro de função

        }
      }
    }
  });
});

function block(x, thisObj)
{
  if (x === "false")
    x = "true";

    thisObj.html(x);
    $(".lock1").html('<i class="fa fa-unlock" aria-hidden="true"></i>');
}

function unblock(x, thisObj)
{
  if (x === "true")
    x = "false";

    thisObj.html(x);
    $(".lock1").html('<i class="fa fa-lock" aria-hidden="true"></i>');

}

PasteBin.

network.php

<?php
$con = mysqli_connect("localhost", "root", "", "mydb2");
?>

<ul class="breadcrumb">
    <li><a href="#">Ir para</a></li>
    <li><a href="#">dashboard</a></li>

</ul>



<div class="page-content-wrap">
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading">
          <div class="page-title">
              <h2><span class="fa fa-hand-spock-o"></span> - Virtual Private Network</h2>
              <p id="test">abc</p>
          </div>
        </div>
        <div class="panel-body">
          <div class="table-responsive">
            <table class="table datatable table-striped">
              <thead>
                <tr>
                  <th>Common Name</th>
                  <th>Real Address</th>
                  <th>Virtual Address</th>
                  <th>Bytes Sent</th>
                  <th>Bytes Received</th>
                  <th>Since</th>
                  <th>Status</th>
                  <th>Blocked</th> <!--inserir a imagem de cliente bloqueado ou não -->
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="context-menu-one">orion</td>
                  <td class="context-menu-one">177.43.212.110</td>
                  <td class="context-menu-one">172.16.191.145</td>
                  <td class="context-menu-one">872199</td>
                  <td class="context-menu-one">860412</td>
                  <td class="context-menu-one">Wed May 25 07:22:52 2016</td>
                  <td class="context-menu-one">false</td>
                  <td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
                </tr>
                <tr>
                  <td class="context-menu-one">elgin</td>
                  <td class="context-menu-one">189.10.58.244</td>
                  <td class="context-menu-one">172.16.6.210</td>
                  <td class="context-menu-one">301365</td>
                  <td class="context-menu-one">250459</td>
                  <td class="context-menu-one">Wed May 25 07:01:37 2016</td>
                  <td class="context-menu-one">false</td>
                  <td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
                </tr>
                <tr>
                  <td class="context-menu-one">databits</td>
                  <td class="context-menu-one">187.17.235.203</td>
                  <td class="context-menu-one">172.16.136.217</td>
                  <td class="context-menu-one">459833</td>
                  <td class="context-menu-one">409771</td>
                  <td class="context-menu-one">Wed May 25 06:09:01 2016</td>
                  <td class="context-menu-one">false</td>
                  <td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
                </tr>
                <tr>
                  <td class="context-menu-one">proficio</td>
                  <td class="context-menu-one">179.213.177.117</td>
                  <td class="context-menu-one">172.16.196.93</td>
                  <td class="context-menu-one">1083595</td>
                  <td class="context-menu-one">945154</td>
                  <td class="context-menu-one">Tue May 24 21:36:21 2016</td>
                  <td class="context-menu-one">false</td>
                  <td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
?>

PasteBin.

我的table:

"lock"选项：

Answer 1

很有趣！

首先，我将 context-menu-one class 的位置更改为 parent 的位置。
并通过以下方式将操作委托给 tds：selector: '.context-menu-one td'.
因为它使 "watch" 的元素更少 jQuery... 并清理代码。

然后...我修改了你itemsobject中的回调函数。我使用 .parent()、siblings() 和 prev() 来定位所有正确的元素。

HTML:

    <ul class="breadcrumb">
    <li><a href="#">Ir para</a></li>
    <li><a href="#">dashboard</a></li>

</ul>



<div class="page-content-wrap">
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading">
          <div class="page-title">
              <h2><span class="fa fa-hand-spock-o"></span> - Virtual Private Network</h2>
              <p id="test">abc</p>
          </div>
        </div>
        <div class="panel-body">
          <div class="table-responsive">
            <table class="table datatable table-striped">
              <thead>
                <tr>
                  <th>Common Name</th>
                  <th>Real Address</th>
                  <th>Virtual Address</th>
                  <th>Bytes Sent</th>
                  <th>Bytes Received</th>
                  <th>Since</th>
                  <th>Status</th>
                  <th>Blocked</th> <!--inserir a imagem de cliente bloqueado ou não -->
                </tr>
              </thead>
              <tbody>
                <tr class="context-menu-one row">
                  <td>orion</td>
                  <td>177.43.212.110</td>
                  <td>172.16.191.145</td>
                  <td>872199</td>
                  <td>860412</td>
                  <td>Wed May 25 07:22:52 2016</td>
                  <td>false</td>
                  <td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
                </tr>
                <tr class="context-menu-one row">
                  <td>elgin</td>
                  <td>189.10.58.244</td>
                  <td>172.16.6.210</td>
                  <td>301365</td>
                  <td>250459</td>
                  <td>Wed May 25 07:01:37 2016</td>
                  <td>false</td>
                  <td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
                </tr>
                <tr class="context-menu-one row">
                  <td>databits</td>
                  <td>187.17.235.203</td>
                  <td>172.16.136.217</td>
                  <td>459833</td>
                  <td>409771</td>
                  <td>Wed May 25 06:09:01 2016</td>
                  <td>false</td>
                  <td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
                </tr>
                <tr class="context-menu-one row">
                  <td>proficio</td>
                  <td>179.213.177.117</td>
                  <td>172.16.196.93</td>
                  <td>1083595</td>
                  <td>945154</td>
                  <td>Tue May 24 21:36:21 2016</td>
                  <td>false</td>
                  <td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript:

$(function(){
  $.contextMenu({
    selector: '.context-menu-one td',

    items: {
      "block": {
        name: "Lock",
        icon: "edit",
        callback: function(key, options){
        console.log("HERE");
          if ($(this).parent().hasClass("row")){
          console.log("HERE IF");
            thisRowPadlock = $(this).siblings(".lock1");

            var m = $(this).siblings(".lock1").prev().text();
            console.log(m);
            var set = block(m, thisRowPadlock, $(this).siblings(".lock1").prev()); // passando  - this - como parâmetro de função
          }
        }
      },
      "sep1": "----------",
      "unblock": {
        name: "Unlock",
        icon: "cut",
        callback: function(key, options){
          console.log("THERE");
          if ($(this).parent().hasClass("row")){
            thisRowPadlock = $(this).siblings("lock1");

            var m = $(this).siblings(".lock1").prev().text();
            console.log(m);
            var set = unblock(m, thisRowPadlock, $(this).siblings(".lock1").prev()); // passando  - this - como parâmetro de função
          }
        }
      }
    }
  });
});

function block(x, padlock, thisObj)
{
console.log("Function block");
  if (x === "false")
    x = "true";

    thisObj.html(x);
    $(padlock).html('<i class="fa fa-unlock" aria-hidden="true"></i>');
}

function unblock(x, padlock, thisObj)
{
console.log("Function unblock");
if (x === "true")
    x = "false";

    thisObj.html(x);
    $(padlock).html('<i class="fa fa-lock" aria-hidden="true"></i>');

}

还有一个 working Fiddle（缺少一些 CSS，抱歉）。

用 n 行更改一行的值 (jquery, php, mysql)

Changing the value of a line with n lines (jquery, php, mysql)

php

mysql

jquery