gpt4 book ai didi

php - 使用 jquery ajax 显示带有更新按钮的选定行表

转载 作者:太空宇宙 更新时间:2023-11-03 10:34:24 25 4
gpt4 key购买 nike

我想选择行内容以在表单中显示它以便我可以更新它使用 jquery ajax 但我有问题。有人能帮助我吗?这对我来说真的很重要,所以我可以理解它

当我运行代码时,我只能显示作为类型转换主键的名字

gestionActor.php

<?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

<?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);
}
}


?>

enter image description here

最佳答案

function updateFunction(e){
var elem = $(e.target);
var parentRow = elem.parents('tr');
$("#row_name").val(parentRow.find("[name='name']").text());
$("#name").val(parentRow.find("[name='name']").text());
$("#address").val(parentRow.find("[name='address']").text());
//considering you saved the values are male and female in db
if(parentRow.find("[name='gender']").text() == 'male') {
$('[value="M"]').attr('checked', true)
}
else {
$('[value="F"]').attr('checked', true)
}
$("#birthdate").val(parentRow.find("[name='birthdate']").text());
}

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");
var rowToUpdate = $('#row_name').val();
var row = $("tr[data-row-name='"+rowToUpdate+"']");
row.find("[name=name]").text($("#name").val());
row.find("[name=address]").text($("#address").val());
row.find("[name=gender]").text($('input[name=gender]:checked').val());
row.find("[name=birthdate]").text($("#birthdate").val());
}
});
}

问题是您在循环中使用了 id 参数,需要将其删除。而您的 updateFunction 只是将点击绑定(bind)到更新按钮。

我已经从数据行中删除了 id 属性并获取了与目标元素相关的值。

       <?php foreach($actors as $cle=>$actor) {?>
<tr data-row-name="<?php echo $actor['name']; ?>">
<td><span name='name'><?php echo $actor['name']; ?></span></td>
<td><span name='address'><?php echo $actor['address']; ?></span></td>
<td><span name='gender'><?php echo $actor['gender']; ?></span></td>
<td><span name='birthdate'><?php echo $actor['birthdate']; ?></span></td>
<td><input type="button" id="update_row" 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 } ?>

像上面那样更新您的 html,并像我提到的那样更新您的 updateFunction。您可以看到所有填充的值。

在更新表单中的保存按钮上方添加一个隐藏字段作为 row_name 以了解我们要更新哪一行,以便我们可以使用此值在更新 ajax 成功后手动更新行。

<input type="hidden" name="name" id="row_name" placeholder="" >
<td colspan="2"><input type="submit" name="update" value="Save" onclick="update_actor();"></td>

关于php - 使用 jquery ajax 显示带有更新按钮的选定行表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51232776/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com