所以我在工作中设置了一个排行榜，它是使用 php、大量 MySQL 和一些漂亮的 CSS 组合在一起的。 您可以在表中看到我有一个标记为“Flukes”的列 - 我想在值的两侧添加一个微小的 + 和 - 按钮，这将增加或减少值，并且不知何故我想添加这对于每个人来说。我一直在尝试找到一些不错的 JavaScript 来创建它，但我似乎不知道如何为每个人添加它
下面是代码片段，上面的其余部分只是提取此信息所需的所有 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>
最佳答案
这是您可能想要尝试的基于 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>
最后，我们将 HTML 与 JQuery 结合起来，如下所示:
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>
现在要将 Fluke 保存回数据库，请在与主文件相同的目录中创建一个 PHP 文件(可能是您的 index.php 文件)。在本例中，我们将其命名为 ajax-processor.php，但您也可以将其命名为任何名称，但如果更改名称，请确保此新名称反射(reflect)在 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));
结果是，您现在可以单击加号和减号来增加或减少 Flukes 的值，并且每次单击加号或减号按钮时分别将值保存到数据库中。但是，您可以使用 Bootstrap 或 Font-Awesome 中的类随意更改加号和减号。我的 friend ，希望这能帮助您入门。祝你好运;-)
关于javascript - 使用 JavaScript 或 PHP 在表中添加和减去值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37485466/