更改值的 HTML 表和外部 PHP 文件答案

【问题标题】：HTML table and external Php file that change value更改值的 HTML 表和外部 PHP 文件
【发布时间】：2016-03-08 16:52:00
【问题描述】：

我有这样的表：

<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 脚本，但我卡住了.. 请帮忙..谢谢..

【问题讨论】：

所以，请展示您到目前为止所做的尝试。我们不是来为你做你的工作的。
你想要 ajax 或 php 解决方案？
发布你当前的js代码
您需要发布您的 PHP 和 JS 代码以便我们了解问题。

标签： javascript php jquery html mysql

【解决方案1】：

如果您可以更改您的 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>

希望这会有所帮助。

【讨论】：

【解决方案2】：

使用 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

【讨论】：

【解决方案3】：

如果你使用表单来获取这个值，你可以使用<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>

Modern web browsers 将显示按钮以减少或增加值。

【讨论】：

【解决方案4】：

尝试首先将值存储在像<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）。

【讨论】：