使用JavaScript或PHP在表中添加和减去值

因此，我在工作中设置了一个排行榜，它使用php，很多MySQL和一些漂亮的CSS放在一起。你可以在表格中看到我有一个标有'Flukes'的列 - 我想在值的两边添加一个小小的+和 - 按钮，这会增加或减少值，不知何故，我想为每个人添加这个。我一直试图找到一些不错的JavaScript来创建这一点，但我似乎不知道如何添加这对于每个个人使用JavaScript或PHP在表中添加和减去值

League Table

下面是从一个代码段，上面休息是只需要所有MySQL将这些信息提取出来。

<table> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Score</th> 
      <th>Game Count</th> 
      <th>Flukes</th> 
     </tr> 
    </thead> 
    <tbody> 
     <? foreach($aPlayers as $aPlayer) 
{ 
     if ($aPlayer['lGameCount'] > 0 && $aPlayer['lGameCount'] < 4) 
     { ?> 
      <tr class="yellow" style="text-align:center;"> 
       <td><?=$aPlayer['PlayerName']?></td> 
       <td><?=round($aPlayer['lScore'])?></td> 
       <td><?=$aPlayer['lGameCount']?></td> 
       <td><?=$aPlayer['lFlukes']?></td> 
      </tr> 
<? } 
      elseif ($aPlayer['lGameCount'] > 3) 
     { ?> 
       <tr class="green" style="text-align:center;"> 
        <td><?=$aPlayer['PlayerName']?></td> 
        <td><?=round($aPlayer['lScore'])?></td> 
        <td><?=$aPlayer['lGameCount']?></td> 
        <td><?=$aPlayer['lFlukes']?></td> 
       </tr> 
<? } 
      else 
     { ?> 
       <tr class="red" style="text-align:center;"> 
        <td><?=$aPlayer['PlayerName']?></td> 
        <td><?=round($aPlayer['lScore'])?></td> 
        <td><?=$aPlayer['lGameCount']?></td> 
        <td><?=$aPlayer['lFlukes']?></td> 
       </tr> 
<? } 
} ?> 
    </tbody> 
</table>

来源

2016-05-27 Jamie Belcher

您是否需要+/-按钮来更新数据库上的flukes值？ – Gadget

这是您可能想尝试的基于JQuery的解决方案。我们模拟表示MySQL数据的，像这样的结果数组：

PHP

 <?php 

      $aPlayers = [ 
       [ 
        "pPlayerID"  => "1", 
        "PlayerName" => "Johnny", 
        "lScore"  => "3113", 
        "lGameCount" => "41", 
        "lFlukes"  => "42", 
       ], 
       [ 
        "pPlayerID"  => "2", 
        "PlayerName" => "Phil", 
        "lScore"  => "3022", 
        "lGameCount" => "13", 
        "lFlukes"  => "40", 
       ], 
       [ 
        "pPlayerID"  => "3", 
        "PlayerName" => "Jammizle", 
        "lScore"  => "2994", 
        "lGameCount" => "62", 
        "lFlukes"  => "100", 
       ], 
       [ 
        "pPlayerID"  => "4", 
        "PlayerName" => "Gary", 
        "lScore"  => "2989", 
        "lGameCount" => "10", 
        "lFlukes"  => "0", 
       ], 
       [ 
        "pPlayerID"  => "4", 
        "PlayerName" => "Johnathan", 
        "lScore"  => "2985", 
        "lGameCount" => "9", 
        "lFlukes"  => "5", 
       ], 
       [ 
        "pPlayerID"  => "5", 
        "PlayerName" => "Kevin", 
        "lScore"  => "2970", 
        "lGameCount" => "17", 
        "lFlukes"  => "5", 
       ], 
       [ 
        "pPlayerID"  => "6", 
        "PlayerName" => "Jason", 
        "lScore"  => "2882", 
        "lGameCount" => "11", 
        "lFlukes"  => "62", 
       ], 
       [ 
        "pPlayerID"  => "7", 
        "PlayerName" => "Stewart", 
        "lScore"  => "2882", 
        "lGameCount" => "81", 
        "lFlukes"  => "56", 
       ], 
       [ 
        "pPlayerID"  => "8", 
        "PlayerName" => "Chris", 
        "lScore"  => "3015", 
        "lGameCount" => "1", 
        "lFlukes"  => "75", 
       ], 
       [ 
        "pPlayerID"  => "9", 
        "PlayerName" => "Nick", 
        "lScore"  => "2985", 
        "lGameCount" => "1", 
        "lFlukes"  => "98", 
       ], 
      ]; 
     ?>

然后，我们改变了你的表结构来上课，这样我们可以在jQuery和我们的类工作还加了一点CSS来帮助我们想象的过程，像这样：

HTML

 <style type="text/css"> 
      .increase-flukes, 
      .decrease-flukes{ 
       cursor:pointer;  /* <== ADD A POINTER CURSOR TO INDICATE YOU CAN CLICK TO INCREASE OR DECREASE FLUKES*/ 
       font-weight:bold; 
       font-size: 18px; 
       display:inline-block; 
       min-width:20px; 
       text-align: center; 
       color:red; 
      } 
      td.flukes-cell{ 
       text-align: left; 
      } 
     </style> 




     <table> 
      <thead> 
      <tr> 
       <th>Name</th> 
       <th>Score</th> 
       <th>Game Count</th> 
       <th>Flukes</th> 
      </tr> 
      </thead> 
      <tbody> 
      <? foreach($aPlayers as $aPlayer) 
      { 
       if ($aPlayer['lGameCount'] > 0 && $aPlayer['lGameCount'] < 4) 
       { ?> 
        <tr class="yellow" style="text-align:center;"> 
         <td><?php echo $aPlayer['PlayerName'];?></td> 
         <td><?php echo round($aPlayer['lScore']);?></td> 
         <td><?php echo $aPlayer['lGameCount'];?></td> 
         <td class="flukes-cell"> 
          <span class="increase-flukes" data-pid="<?php echo $aPlayer['pPlayerID'];?>">+</span> 
          <span class="flukes" id="fluke-<?php echo $aPlayer['pPlayerID'];?> " data-pid="<?php echo $aPlayer['pPlayerID'];?>"><?php echo $aPlayer['lFlukes'];?></span> 
          <span class="decrease-flukes" data-pid="<?php echo $aPlayer['pPlayerID'];?>">-</span> 
         </td> 
        </tr> 
       <? } 
       elseif ($aPlayer['lGameCount'] > 3) 
       { ?> 
        <tr class="green" style="text-align:center;"> 
         <td><?php echo $aPlayer['PlayerName'];?></td> 
         <td><?php echo round($aPlayer['lScore']);?></td> 
         <td><?php echo $aPlayer['lGameCount'];?></td> 
         <td class="flukes-cell"> 
          <span class="increase-flukes" data-pid="<?php echo $aPlayer['pPlayerID'];?>">+</span> 
          <span class="flukes" id="fluke-<?php echo $aPlayer['pPlayerID'];?> " data-pid="<?php echo $aPlayer['pPlayerID'];?>"><?php echo $aPlayer['lFlukes'];?></span> 
          <span class="decrease-flukes" data-pid="<?php echo $aPlayer['pPlayerID'];?>">-</span> 
         </td> 
        </tr> 
       <? } 
       else 
       { ?> 
        <tr class="red" style="text-align:center;"> 
         <td><?php echo $aPlayer['PlayerName'];?></td> 
         <td><?php echo round($aPlayer['lScore']);?></td> 
         <td><?php echo $aPlayer['lGameCount'];?></td> 
         <td class="flukes-cell"> 
          <span class="increase-flukes" data-pid="<?php echo $aPlayer['pPlayerID'];?>">+</span> 
          <span class="flukes" id="fluke-<?php echo $aPlayer['pPlayerID'];?> " data-pid="<?php echo $aPlayer['pPlayerID'];?>"><?php echo $aPlayer['lFlukes'];?></span> 
          <span class="decrease-flukes" data-pid="<?php echo $aPlayer['pPlayerID'];?>">-</span> 
         </td> 
        </tr> 
       <? } 
      } ?> 
      </tbody> 
     </table>

最后，我们用jQuery结婚HTML像这样：

JAVASCRIPT：JQUERY

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
     <script type="text/javascript"> 
      ;       // CLOSE OFF ANY UNCLOSED JS TAGS... IF ANY ;-) 
      jQuery.noConflict();  // ADD THE noConflict() METHOD, IN CASE YOU ARE USING OTHER LIBRARIES THAT MAKE USE OF THE $ SYMBOL 
      (function ($) { 
       $(document).ready(function(e) { 
        // CREATE VARIABLES TO USE IN THE PROGRAM 
        var flukesCell = $("td.flukes-cell"); 
        flukesCell.each(function(data){ 
         var decreaseFluke = $(this).find(".decrease-flukes"); 
         var increaseFluke = $(this).find(".increase-flukes"); 
         var flukeContent = $(this).find(".flukes"); 

         decreaseFluke.on("click", function(evt){ 
          var flcVal = flukeContent.text(); 
          var id  = $(this).attr("data-pid"); 
          if(flcVal != 0){ 
           flcVal--; 
           flukeContent.text(flcVal); 
           performAjaxSave(flcVal, id); 
          } 
         }); 

         increaseFluke.on("click", function(evt){ 
          var flcVal = flukeContent.text(); 
          var id  = $(this).attr("data-pid"); 
          flcVal++; 
          flukeContent.text(flcVal); 
          performAjaxSave(flcVal, id); 
         }); 
        }); 

        function performAjaxSave(flcVal, id){ 
         var objData = {"id":id, "fluke":flcVal}; 
         $.ajax({ 
          url   : "ajax-processor.php",  //<== THIS SHOULD POINT TO THE PHP FILE THAT PROCESSES THE AJAX REQUEST. IF "ajax-processor.php" DOESN'T WORK FOR YOU, TRY: "./ajax-processor.php" OR USE THE FULL-URL 
          dataType : "json", 
          cache  : false, 
          type  : "POST", 
          data  : (objData), 

          success: function (data, textStatus, jqXHR){ 
           if(data){ 
            alert(data.message);  // THIS COULD BE VERY ANNOYING, REALLY... BUT COULD BE HANDY DURING DEVELOPMENT... DELETE IT!!! 
            console.log(data.message); 
           } 
          }, 

          error: function (jqXHR, textStatus, errorThrown) { 
           console.log('The following error occurred: ' + textStatus, errorThrown); 
          }, 

          complete: function (jqXHR, textStatus) { 
          } 
         }); 
        } 
       }); 
      })(jQuery); 

     </script>

而现在保存回福禄克到数据库中，在同一个目录中创建一个PHP文件主文件（可能是你的index.php文件）。在这种情况下，我们将其称为ajax-processor.php但您可以任意调用它，但如果更改名称，请确保此新名称反映在Javascript的AJAX部分中。下面是Ajax的processor.php文件的内容：

<?php 
     // FILENAME: ajax-processor.php 

     //DATABASE CONNECTION CONFIGURATION: 
     defined("HOST")  or define("HOST", "localhost");   //REPLACE WITH YOUR DB-HOST 
     defined("DBASE") or define("DBASE", "sim");    //REPLACE WITH YOUR DB NAME 
     defined("USER")  or define("USER", "root");    //REPLACE WITH YOUR DB-USER 
     defined("PASS")  or define("PASS", "root");    //REPLACE WITH YOUR DB-PASS 

     // GET THE POSTED VALUES OF THE FLUKE AND THE PLAYER ID FROM THE AJAX REQUEST... 
     $playerID = isset($_POST['id'])  ? htmlspecialchars(trim($_POST['id']))  : null; 
     $fluke  = isset($_POST['fluke']) ? htmlspecialchars(trim($_POST['fluke'])) : null; 

     $response = ['message'=>'Error updating Fluke for the Player with ID: ' . $playerID]; 

     try { 
      $dbh = new PDO('mysql:host=' . HOST . ';dbname=' . DBASE, USER, PASS); 
      $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 

      // NOW UPDATE THE FLUKES ONLY IN THE tPlayers TABLE USING THE DATA ABOVE 
      $sql = "UPDATE tPlayers SET rFlukes=:RFL WHERE pPlayerID=:PID"; 
      $stmt = $dbh->prepare($sql); 
      $stmt->bindParam(':RFL', $fluke); 
      $stmt->bindParam(':PID', $playerID); 
      $status = $stmt->execute(); 

      if($status){ 
       $response["message"] = "Update was Successful!!"; 
      } 

      //GARBAGE COLLECTION 
      $dbh = NULL; 
     } catch (PDOException $e) { 
      $response["message"] = $e->getMessage(); 
     } 

     die(json_encode($response));

，其结果是，你现在可以点击加号和减号来增加或减少吸虫的值加上值保存到数据库每次点击加号或减号按钮。但是，感觉可以使用Bootstrap或Font-Awesome中的类来改变加号&。希望这会帮助你开始，我的朋友。 Good-Luck ;-)

来源

2016-05-27 14:49:49 Poiz

这看起来不错！价值减少和增加的要求！但有一点，有没有办法将它保存回数据库？那就是我被卡住的地方 –

@Jamie Belcher你可以使用AJAX做到这一点。我的意思是你可以使用AJAX将数据保存回数据库，并且应该很容易在当前使用的Javascript中实现。 – Poiz

我会接受你的话，并将其标记为答案，谢谢！ –

如果您不需要更新数据库，然后从

<td><?=$aPlayer['lFlukes']?></td>

改变吸虫柱结构

<td><a onclick="decrease(this)">-</a><span class="value"><?=$aPlayer['lFlukes']?></span><a onclick="increase(this)">+</a></td>

，并添加下面的JavaScript函数源

function increase(elem) { 
    var valueElem = elem.parentElement.getElementsByClassName("value")[0]; 
    valueElem.textContent = (valueElem.textContent*1+1); 
} 

function decrease(elem) { 
    var valueElem = elem.parentElement.getElementsByClassName("value")[0]; 
    valueElem.textContent = (valueElem.textContent*1-1); 
}

来源

2016-05-27 14:30:30 gdros

使用JavaScript或PHP在表中添加和减去值

回答

相关问题