Php 使用jqueryajax使用update按钮显示所选行表
我想选择行内容以在表单中显示它，以便更新它 使用jQueryAjax，但我有一个问题。有人能帮我吗？ 这对我来说真的很重要，所以我可以忍受 当我运行代码时，我只能显示名称，它是actors表的主键 gestionActors.phpPhp 使用jqueryajax使用update按钮显示所选行表,php,jquery,mysql,ajax,Php,Jquery,Mysql,Ajax,我想选择行内容以在表单中显示它，以便更新它 使用jQueryAjax，但我有一个问题。有人能帮我吗？ 这对我来说真的很重要，所以我可以忍受 当我运行代码时，我只能显示名称，它是actors表的主键 gestionActors.php <?php require_once("config.php"); include('getActors.php'); $actors = get_actors(); ?> &l
<?php
require_once("config.php");
include('getActors.php');
$actors = get_actors();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajouter un acteur</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
table, tr, td{
border :1px solid black;
}
</style>
<script src="jquery-3.2.1.js"></script>
<script >
function update_actor(name){
jQuery.ajax({
type: "POST",
data: 'name='+name, // <-- put on top
url: "update.php",
cache: false,
success: function(response)
{
alert("Record successfully updated");
}
});
}
function updateFunction(){
$("#update").click(function(){
name=(this).getAttribute('name');
var address=$("#address"+name).text();
var gender=$("#gender"+name).text();
var birthdate=$("#birthdate"+name).text();
$("#name").val(name);
$("#address").val(address);
$("#gender").val(gender);
$("#birthdate").val(birthdate);
});
}
function delete_actor(){
var name=document.getElementById('name').value;
var req = new XMLHttpRequest();
req.onreadystatechange=function(){
if(req.readyState==4 && req.status==200){
document.getElementById('div2').innerHTML="";
document.getElementById('div2').innerHTML=req.responseText;
}
}
req.open('GET', 'delete.php?name='+name,true);
req.send();
}
</script>
</head>
<body>
<h1> *** Gestion Actors ***</h1>
<table>
<tr><th>Name</th>
<th>Address</th>
<th>Gender</th>
<th>Birthdate</th>
<th>Update Actor</th>
<th>Delete Actor</th>
</tr>
<?php foreach($actors as $cle=>$actor) {?>
<tr>
<td><span id="<?php echo $actor['name']; ?>" name='name'><?php echo $actor['name']; ?></span></td>
<td><span id="address" name='address'><?php echo $actor['address']; ?></span></td>
<td><span id="gender" name='gender'><?php echo $actor['gender']; ?></span></td>
<td><span id="birthdate" name='birthdate'><?php echo $actor['birthdate']; ?></span></td>
<td><input type="button" id="update" name="<?php echo $actor['name'];?>" value="update" onclick="updateFunction();"></td>
<td><input type="button" name="delete" value="delete" onclick="delete_actor();"></td>
</tr>
<?php } ?>
</table>
<div id="update">
<h2>Update Actor</h2>
<table>
<tr>
<td><label>Name : </label></td><td><input type="text" name="name" id="name" placeholder="Actor Name..." ></td>
</tr>
<tr>
<td><label>Address : </label></td><td><input type="text" id="address" name="address" placeholder="Actor Address.." ></td>
</tr>
<tr>
<td><label>Gender : </label></td><td>
<input type="radio" name="gender" id="gender" value="M"><span> M</span>
<input type="radio" name="gender" id="gender" value="F"><span> F</span></td>
</tr>
<tr>
<td><label>Birthdate : </label></td><td><input type="date" id="birthdate" name="birthdate" placeholder="Actor Birthdate.."></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="update" value="Save" onclick="update_actor();"></td>
</tr>
</table>
</div>
</body>
</html>
<?php
include('config.php') ;
global $con;
if(!empty($_POST)){
$name = htmlspecialchars($_POST['name']);
$address = htmlspecialchars($_POST['address']);
$gender = htmlspecialchars($_POST['gender']);
$birthdate = htmlspecialchars($_POST['birthdate']);
$sql_query="UPDATE stars set address = '$address', gender= '$gender', birthdate= '$birthdate' WHERE name like '$name'";
$res=mysqli_query($con,$sql_query);
if($res) echo "Actor updated";
else{
echo "update Problem :". mysqli_error($con);
}
}
?>
请更新您的表格如下
<table>
<tr><th>Name</th>
<th>Address</th>
<th>Gender</th>
<th>Birthdate</th>
<th>Update Actor</th>
<th>Delete Actor</th>
</tr>
<?php foreach($arrdata as $cle=>$actor) {?>
<tr>
<td><span class="actorname"><?php echo $actor['name']; ?></span></td>
<td><span class="address"><?php echo $actor['address']; ?></span></td>
<td><span class="gender"><?php echo $actor['gender']; ?></span></td>
<td><span class="birthdate"><?php echo $actor['birthdate']; ?></span></td>
<td><input type="button" id="update" name="<?php echo $actor['name'];?>" value="update" onclick="updateFunction(event
);"></td>
<td><input type="button" name="delete" value="delete" onclick="delete_actor();"></td>
</tr>
<?php } ?>
</table>
<div id="update">
<h2>Update Actor</h2>
<form name="actor" id="actordata">
<table>
<tr>
<td><label>Name : </label></td><td><input type="text" name="name" id="name" placeholder="Actor Name..." ></td>
</tr>
<tr>
<td><label>Address : </label></td><td><input type="text" id="address" name="address" placeholder="Actor Address.." ></td>
</tr>
<tr>
<td><label>Gender : </label></td><td>
<input type="radio" name="gender" id="gender" value="M"><span> M</span>
<input type="radio" name="gender" id="gender" value="F"><span> F</span></td>
</tr>
<tr>
<td><label>Birthdate : </label></td><td><input type="date" id="birthdate" name="birthdate" placeholder="Actor Birthdate.."></td>
</tr>
<tr>
<td colspan="2"><input type="button" name="update" value="Save" onclick="update_actor();"></td>
</tr>
</table>
</form>
</div>
function update_actor(){
jQuery.ajax({
type: "POST",
data: $('#actordata').serialize(), // <-- put on top
url: "update.php",
cache: false,
success: function(response)
{
alert("Record successfully updated");
}
});
}
function updateFunction(e){
$('[value="M"]').attr('checked', false);
$('[value="F"]').attr('checked', false);
var elem = $(e.target);
var parentRow = elem.parents('tr');
$("#name").val(parentRow.find("[class='actorname']").text());
$("#address").val(parentRow.find("[class='address']").text());
if(parentRow.find("[class='gender']").text() == 'M') {
$('[value="M"]').attr('checked', true)
}
else {
$('[value="F"]').attr('checked', true)
}
$("#birthdate").val(parentRow.find("[class='birthdate']").text());
}
请更新您的表格如下
<table>
<tr><th>Name</th>
<th>Address</th>
<th>Gender</th>
<th>Birthdate</th>
<th>Update Actor</th>
<th>Delete Actor</th>
</tr>
<?php foreach($arrdata as $cle=>$actor) {?>
<tr>
<td><span class="actorname"><?php echo $actor['name']; ?></span></td>
<td><span class="address"><?php echo $actor['address']; ?></span></td>
<td><span class="gender"><?php echo $actor['gender']; ?></span></td>
<td><span class="birthdate"><?php echo $actor['birthdate']; ?></span></td>
<td><input type="button" id="update" name="<?php echo $actor['name'];?>" value="update" onclick="updateFunction(event
);"></td>
<td><input type="button" name="delete" value="delete" onclick="delete_actor();"></td>
</tr>
<?php } ?>
</table>
<div id="update">
<h2>Update Actor</h2>
<form name="actor" id="actordata">
<table>
<tr>
<td><label>Name : </label></td><td><input type="text" name="name" id="name" placeholder="Actor Name..." ></td>
</tr>
<tr>
<td><label>Address : </label></td><td><input type="text" id="address" name="address" placeholder="Actor Address.." ></td>
</tr>
<tr>
<td><label>Gender : </label></td><td>
<input type="radio" name="gender" id="gender" value="M"><span> M</span>
<input type="radio" name="gender" id="gender" value="F"><span> F</span></td>
</tr>
<tr>
<td><label>Birthdate : </label></td><td><input type="date" id="birthdate" name="birthdate" placeholder="Actor Birthdate.."></td>
</tr>
<tr>
<td colspan="2"><input type="button" name="update" value="Save" onclick="update_actor();"></td>
</tr>
</table>
</form>
</div>
function update_actor(){
jQuery.ajax({
type: "POST",
data: $('#actordata').serialize(), // <-- put on top
url: "update.php",
cache: false,
success: function(response)
{
alert("Record successfully updated");
}
});
}
function updateFunction(e){
$('[value="M"]').attr('checked', false);
$('[value="F"]').attr('checked', false);
var elem = $(e.target);
var parentRow = elem.parents('tr');
$("#name").val(parentRow.find("[class='actorname']").text());
$("#address").val(parentRow.find("[class='address']").text());
if(parentRow.find("[class='gender']").text() == 'M') {
$('[value="M"]').attr('checked', true)
}
else {
$('[value="F"]').attr('checked', true)
}
$("#birthdate").val(parentRow.find("[class='birthdate']").text());
}
<input type="hidden" name="name" id="row_name" placeholder="" >
<td colspan="2"><input type="submit" name="update" value="Save" onclick="update_actor();"></td>
<input type="hidden" name="name" id="row_name" placeholder="" >
<td colspan="2"><input type="submit" name="update" value="Save" onclick="update_actor();"></td>
感谢mohsin的回答，但是当我们单击表中的按钮update时，它会在表单的输入中显示所选行的内容。它不适合我，它只显示名称，但其他输入是空的？？是的，你可以看到一个捕获，我将把它添加到我的问题中，这样你就可以理解我想做什么，请分享我正在努力，我很快会分享你完整的代码。感谢mohsin的回答，但是当我们点击菜单中的按钮更新时会怎么样表它向我们显示表单输入中所选行的内容。它对我不起作用，它只显示名称，但其他输入是空的？？是的，你可以看到一个捕获，我将把它添加到我的问题中，这样你就可以理解我想做什么，请分享我正在努力，我将很快分享你的完整代码。非常感谢，这真的很有帮助欢迎你，它现在解决了你所有的问题吗？我只检查了你的html和js代码，所以没有检查php部分。最后一件事是，当我更新或从表中删除一行时，我可以做些什么，以便表可以显示数据库内容而不刷新页面？？我认为在完成delete ajax调用后刷新页面更好，因为如果您想在不刷新页面的情况下更新内容，则需要调用另一个api从db中获取所有记录，并手动更新整个列表。您需要使用新获取的数据在js中构建行。您现在面临的问题是什么？唯一的问题是，当我更新一行时，我必须手动刷新页面，使其显示更新的行。非常感谢，这真的很有帮助不客气，您的问题现在都解决了吗？我只检查了你的html和js代码，所以没有检查php部分。最后一件事是，当我更新或从表中删除一行时，我可以做些什么，以便表可以显示数据库内容而不刷新页面？？我认为在完成delete ajax调用后刷新页面更好，因为如果您想在不刷新页面的情况下更新内容，则需要调用另一个api从db中获取所有记录，并手动更新整个列表。您需要使用新获取的数据在js中构建行。您现在面临的问题是什么？唯一的问题是当我更新一行时，我必须手动刷新页面，以便它显示更新的行