I have a table of player data with a delete button next to each row. When the button is clicked, it should delete that specific row instantly using jQuery. I have included my code thus far. I am really stuck when the button should be clicked. Should I use a header function?
index.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- Create a table-->
<table style width="800" border="1" cellpadding="1" cellspacing="1">
<!-- Create headings. Every row is defined as with <tr> tag-->
<!-- Create headings. Every row is defined as with <tr> tag-->
<tr>
<th>Player ID</th>
<th>Player Name</th>
<th>Player Position</th>
<th>Delete</th>
</tr>
<?php
require "php/conn.php";
//Select query
$res = $db -> query ("SELECT * FROM player");
//Set pointer to 1
$res -> data_seek(0);
//Display data using while loop
while ($row = $res -> fetch_assoc()) {
// Write html code in php using this method
echo "<div class = 'row'>";
echo "<tr>";
echo "<td>".$row['id']."</td>";
echo "<td>".$row['surname']."</td>";
echo "<td>".$row['position']."</td>";
echo "<td><button id = 'dlt_btn' type='button'>Delete</button></td>";
echo "</tr>";
echo "</div>";
}
?>
</body>
script.js
$(document).ready(function () {
$("#dlt_btn").click(function(){
//Activate 'delete.php'
});
});
delete.php
?
You should be using a class vs ID in this context, but you can use $(this) to locate the clicked element, and traverse/remove via .parent() jquery method. This is purely to remove the row from the DOM, you would need to perform an ajax request to tell the server which row to remove from the database. In this case, you should add the row ID attribute to the html, and send this along with the AJAX request.
You could append the row ID in the button as an attribute, like
<button id = 'dlt_btn' type='button' row-id='<?=$yourRowID%>'>Delete</button>$(document).ready(function () {
$("#dlt_btn").click(function(){
let rowId = $(this).attr('row-id'); //Pull the attribute from your button
let tr = $(this).parent().parent(); //Define the TR itself
$.post('/delete.php', {row_id: rowId}, function(result){
//Do something with the message your page returns after deleting
tr.remove(); //Remove the TR from the dom
});
});
});</div>
using DOM manipulate:
$(document).ready(function(){
$("#dlt_btn").click(function () {
var deleteRow = $(this)
deleteRow.parents('.row').fadeOut(200);
});
})
if you wanna delete from database. trigger another line of code in php when the function runs in the same time
index.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- Create a table-->
<table style width="800" border="1" cellpadding="1" cellspacing="1">
<!-- Create headings. Every row is defined as with <tr> tag-->
<!-- Create headings. Every row is defined as with <tr> tag-->
<tr>
<th>Player ID</th>
<th>Player Name</th>
<th>Player Position</th>
<th>Delete</th>
</tr>
<?php
require "php/conn.php";
//Select query
$res = $db -> query ("SELECT * FROM player");
//Set pointer to 1
$res -> data_seek(0);
//Display data using while loop
while ($row = $res -> fetch_assoc()) {
// Write html code in php using this method
echo "<div class = 'row'>";
echo "<tr>";
echo "<td>".$row['id']."</td>";
$player_id = $row['id'];
echo "<td>".$row['surname']."</td>";
echo "<td>".$row['position']."</td>";
echo "<td><button id = 'dlt_btn' value = ". $row['id'] . " type='button'>Delete</button></td>";
echo "</tr>";
echo "</div>";
}
?>
</body>
script.js
$(document).ready(function () {
$("#dlt_btn").click(function () {
// The '$.ajax' function is used to perform a asynchronous HTTP request
$.ajax({
url: 'delete.php',
//The type of request to make, which can be either “POST” or “GET”
type: 'post',
//data: the data to be sent to the server when performing the Ajax request i.e. You are sending the 'id' of the friends_list to the 'likes.php' file.
//'val' = returns or sets the value attribute of the #selected elements
//$(selector).val() = Returns the value attribute
//the 'id' refers to the 'id' variable in 'likes.php'
//Follows a {key:value} format. E.g. id('KEY'): $("#id").val()} ('VALUE');
//N.B! The key is the the field/column name in database, hence key = 'id'
data: {id : $("#dlt_btn").val()},
//success: A function to be called if the request succeeds
success: function(result)
{
//Reload the current document:
location.reload();
}
});
});
});
delete.php
<?php
require "php/conn.php";
$player_id = $_POST['id'];
$stmt = $db -> prepare ("DELETE FROM player WHERE id = $player_id");
$stmt -> execute();
?>