使用jQuery Ajax使用更新按钮显示选定的行表
[英]display selected row table with update button using jquery ajax
问题描述
我想选择行内容以表格形式显示，所以我可以用jquery ajax更新它，但是我有一个问题。 有人能帮助我吗？ 对我来说真的很重要，所以我可以理解
当我运行代码时，我只能显示名称，该名称是actors表的主键
gestionActors.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>
update.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);
}
}
?>
2 个解决方案
解决方案1
2 2018-07-08 14:56:18
请如下更新您的表格
<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>
更新的ajax函数如下。
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());
}
解决方案2
2 已采纳 2018-07-08 16:12:23
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只需将单击绑定到更新按钮。
我从数据行中删除了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>
如何使用ajax更新数据库中的记录并单击按钮时删除表行？
[英]How update records in the database and remove a table row on button click using ajax?
使用jQuery将表格行中的特定tds放入编辑中（然后使用ajax更新）
[英]Put specific tds from a table row into edit using jQuery (then update w/ ajax)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.