我有这样的表:
<table border="1">
<tr align="left" valign="top">
<th>ID</th>
<th>NAME</th>
<th>VALUE</th>
</tr>
<tr align="left" valign="top">
<td>1</td>
<td>Item 1</td>
<td><button>-</button> 5 <button>+</button></td>
</tr>
</table>
由Php生成,所有信息均来自MySql DB.. 我想激活按钮“-”和“+”,所以当我点击减号时,值 5(在本例中)将变为 4,或者当我单击加号时,值 5 将变为 6,并且在 MySql DB 中一些外部 php 文件将实时更改值..
我尝试了一些 AJAX 脚本,但我卡住了…… 请帮助..谢谢..
最佳答案
首先尝试将值存储在 HTML 元素中,例如 <span></span>
, 并分配 class
+
的标签和 -
按钮:
<table border="1">
<tr align="left" valign="top">
<th>ID</th>
<th>NAME</th>
<th>VALUE</th>
</tr>
<tr align="left" valign="top">
<td>1</td>
<td>Item 1</td>
<td><button class="minus">-</button> <span>5</span> <button class="plus">+</button></td>
</tr>
</table>
然后创建脚本:
$(document).ready(function(){
$(document).on("click", ".minus", function(){ /* WHEN MINUS IS CLICKED */
var elem = $(this); /* THE ELEMENT CLICKED */
var id = elem.parent().siblings(":first").text(); /* ID OF THIS ROW IN THE DATABASE */
var current_no = Number(elem.closest("td").find("span").html()); /* CURRENT VALUE OF THIS ROW */
var new_no = current_no - 1; /* REDUCE ONE VALUE */
elem.closest("td").find("span").html(new_no); /* REPLACE WITH THE NEW NUMBER INSIDE THE SPAN */
});
$(document).on("click", ".plus", function(){ /* WHEN PLUS IS CLICKED */
var elem = $(this); /* THE ELEMENT CLICKED */
var id = elem.parent().siblings(":first").text(); /* ID OF THIS ROW IN THE DATABASE */
var current_no = Number(elem.closest("td").find("span").html()); /* CURRENT VALUE OF THIS ROW */
var new_value = current_no + 1; /* ADD ONE VALUE */
elem.closest("td").find("span").html(new_no); /* REPLACE WITH THE NEW NUMBER INSIDE THE SPAN */
});
});
要实时更新 MySQL 数据库中的数据,您需要使用 AJAX .
$.ajax({ /* START AJAX */
type: "POST", /* METHOD TO USE TO PASS THE DATA */
url: "update.php", /* FILE DESTINATION OF THE DATA */
data: {"id": id, "value": new_value} /* THE DATA TO BE PASSED ON */
}); /* END OF AJAX */
关于update.php
文件,它必须包含 UPDATE
查询:
/*** YOUR ESTABLISHED CONNECTION HERE ***/
$stmt = $connection->prepare("UPDATE table SET value = ? WHERE id = ?");
$stmt->bind_param("ii", $_POST["value"], $_POST["id"]);
$stmt->execute();
这是一个jsfiddle (但没有 AJAX)。
关于javascript - 更改值的 HTML 表格和外部 Php 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34076767/