更改值的HTML表和外部Php文件
HTML table and external Php file that change value
我有这样的表:
<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数据库。。我想激活按钮"-"和"+",所以当我单击减号时,值5(在这种情况下)将变为4,或者当我单击加号时,值将变为6,而且在MySql DB中,一些外部php文件将实时更改值。。
我尝试了一些AJAX脚本,但我被卡住了。。请帮忙。。谢谢
首先尝试将值存储在类似<span></span>
的HTML元素中,然后为+
和-
按钮分配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)。
如果使用表单获取此值,则可以使用<input type="number" />
:
<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><input type="number" value="5" /></td>
</tr>
</table>
现代网络浏览器会显示按钮来减少或增加值。
使用JS/jQuery:
/* JS: */
var counter = 5;
$(".down").on("click", function() {
if (counter > 0) {
counter--;
$('.anumber').text(counter);
}
});
$(".up").on("click", function() {
counter++;
$('.anumber').text(counter);
});
<!-- HTML: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="down">-</button> <span class="anumber">5</span>
<button class="up">+</button>
</td>
</tr>
</table>
JSFiddle
如果您可以更改html并添加一些类,请检查以下建议:
$(function(){
$('body').on('click' ,'.minus', function(){
var current_number = parseInt($(this).parent().find('.number').text());
current_number--;
$(this).parent().find('.number').text(current_number);
});
$('body').on('click' ,'.plus', function(){
var current_number = parseInt($(this).parent().find('.number').text());
current_number++;
$(this).parent().find('.number').text(current_number);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 class='number'>5</span>
<button class='plus'>+</button>
</td>
</tr>
</table>
希望这能有所帮助。
相关文章:
- 加载包含 Javascript 的外部 PHP 文件
- 为什么不是'当试图使用Ajax和外部PHP文件发布内容时,我的表单工作不正常,该文件接收两个字符串
- javascript$.post将参数传递到外部PHP文件
- 动态添加输入字段,但字段是由外部PHP函数生成的
- 500(内部服务器错误)的外部php文件
- 从外部php文件重定向页面(在ajax调用中)
- 如何将来自外部 PHP 页面的内容包含在带有 onlick 事件的 DIV 中
- 在外部 php 文件中包含缩小的 javascript
- 我想使用 JavaScript 将外部 PHP 文件包含在 HTML 页面中
- 来自外部 php 文件的 pubnub 回复
- JavaScript/Ajax -- 将当前页面 URL 发送到外部 PHP SCript
- 外部 PHP 数据不通过 AJAX
- 如何将外部PHP文件包含在Joomla文章中
- Ajax 在单击时调用外部.php和脚本
- 让jQuery函数使用来自外部php文件的数据和mySQL查询
- 在本地 JavaScript 文件中调用外部 PHP 文件
- 如何在“onclick”事件期间加载外部php文件
- 外部PHP文件中的innerHTML
- 将从外部php文件创建的项居中
- 如何将外部php文件字符串分配给javascript变量