I have table like this:
<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>
It is generated by Php and all information are from MySql DB.. I would like to activate buttons "-" and "+", so when I click minus, value 5 (in this case) will became 4 or when I click plus value 5 will became 6, and also in MySql DB some external php file will change values in real time..
I tried with some AJAX scripts, but I am stuck.. Please help.. Thanks..
Try storing first the value in an HTML element like <span></span>
, and assign class
tag for the +
and -
button:
<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>
Then create the script:
$(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 */
});
});
For updating the data in your MySQL database in real-time, you need to use 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 */
On the update.php
file, it must contain the UPDATE
query:
/*** YOUR ESTABLISHED CONNECTION HERE ***/
$stmt = $connection->prepare("UPDATE table SET value = ? WHERE id = ?");
$stmt->bind_param("ii", $_POST["value"], $_POST["id"]);
$stmt->execute();
Here is a jsfiddle ( but without the AJAX ).
Better if you can change your html and add some classes, check the following suggestion :
$(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>
Hope this helps.
Using 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>
If you use a form to fetch this value, you can use the <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 will display buttons to decrease or increase the value.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.