所以我在工作中设置了一个排行榜，它使用php，很多MySQL和一些漂亮的CSS组合在一起。 您可以在表格中看到我有一个标有＆＃39; Flukes＆＃39; - 我想在值的两边添加一个小+和 - 按钮，这将增加或减少该值，并且我想以某种方式为每个人添加此按钮。我一直试图找到一些不错的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>
答案 0 :(得分：1)
这是您可能想要尝试的基于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",
],
];
?>
然后我们改变了Table的结构，以便我们可以使用JQuery中的类，并且我们还添加了一些CSS来帮助我们可视化Process，如下所示：
<强> 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 ，但您也可以将其称为任何内容，但如果您更改名称，请确保此新名称反映在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的值，并分别在每次单击加号或减号按钮时将值保存到数据库。但是，随意更换Plus＆amp;减号可能使用Bootstrap或Font-Awesome中的类。我的朋友，希望这会帮助你开始。祝你好运; - ）
答案 1 :(得分：0)
如果您不需要更新数据库，请从
更改吸收列结构<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);
}