PHP PDO数据库
问题描述:
我想编辑整个信息,这是通过模态框在JavaScript中显示,但我能够编辑列表中的第一个项目而不是other.Please告诉我如何编辑/更新下一个项目。下面是我的代码PHP PDO数据库
<?php
session_start();
$sessionArr = $_SESSION['user_session'];
include_once '../connection.php';
$userDetails = [];
try{
$userId = $sessionArr['userId'];
// Set the PDO error mode to exception
$sql = "SELECT * FROM details WHERE iUserId=:USERID ORDER BY id DESC";
$stmt = $pdo->prepare($sql);
$stmt->execute(array(':USERID'=>$userId));
$userDetails =$stmt->fetchAll(PDO::FETCH_ASSOC);
if($stmt->rowCount() < 0)
{
echo "no data found";
exit;
}
} catch(PDOException $error){
die("ERROR: Could not connect. " . $error->getMessage());
}
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<table>
<tr>
<th>Date</th>
<th>Name</th>
<th>Amount</th>
<th>Phone</th>
<th></th>
<th>Action</th>
</tr>
<?php foreach($userDetails as $item): ?>
<tr>
<td><?php print $item['date']; ?></td>
<td><?php print $item['p_name']; ?></td>
<td><?php print $item['amount']; ?></td>
<td><?php print $item['date']; ?></td>
<td></td>
<td><button id="myBtn">Edit</button></td>
<td>Delete</td>
</tr>
<?php endforeach; ?>
</table>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<form action="" method="post">
<p id="emp">
<input type="text" name="e_name" id="e_name" placeholder="<?php echo
$item['e_name']; ?>" required style='text-transform:uppercase'>
</p>
<input type="submit" Value="Submit" name="submit" id="submit">
</form>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
答
首先我们需要一个key
/id
这样我们就可以更新或删除定记录。
我们将使用这个id
存储在一个表格行中,在data-id
属性中,您可以通过JS中的.dataset.id
访问这个。 (请参阅下面的代码,我解释了它的意见)。
如果你想添加一个事件监听器,你不应该做这样的事情:(代码)
<td><button id="myBtn">Edit</button></td>
id attribute
应该永远是独一无二的,使用.class
代替。
我知道你想更新的价值观,所以我们追加或name
到e_name
元素value
,而不是placeholder
像你这样。
这里是工作示例。请阅读我所有的评论,以便更好地理解正在发生的事情。
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var editButtons = document.querySelectorAll('.myBtn');
// Get the <span> element that closes the modal
var closeButton = document.querySelector('.close');
// When the user clicks the button, open the modal
// Each edit button we add event 'click' listener
for (var i = 0; i < editButtons.length; i++) {
var editButton = editButtons[i];
editButton.addEventListener('click', function(event) {
// Here we access our row tr, we have data-id with our id in it
var row = this.closest("tr");
// Here is your extracted data
// Do whatever you need to
var rowId = row.dataset.id;
var rowDate = row.cells[0].innerText;
var rowName = row.cells[1].innerText;
var rowAmount = row.cells[2].innerText;
var rowPhone = row.cells[3].innerText;
// It's our data-action, we can simply switch from one action to another
if (this.dataset.action === 'edit') {
// edit stuff...
// We call to open a modal, simply by using css toggle
modal.classList.add('visible');
// We append all data from table row to our form
document.getElementById('e_name').value = rowName;
document.getElementById('e_amount').value = rowAmount;
// ... even more stuff
}
if (this.dataset.action === 'delete') {
// delete stuff
// We want to remove record from db with given `rowId`
// xhr/ajax request sends `rowId` to your backend
// you can a function here like removeElement(rowId);
}
});
}
closeButton.addEventListener('click', closeModal);
// We call this function whenever we want,
// eg. We click close button or after successful edit
function closeModal() {
modal.classList.remove('visible');
}
function onFormSubmit() {
//do your stuff
console.log(this);
// do xhr/ajax request
// We prevent the form from reloading the page
return false;
}
#myModal {
border: 2px solid black;
border-radius: 4px;
padding: 20px;
display: none;
}
#myModal.visible {
display: block;
}
#myModal .close {
cursor: pointer;
border: 1px solid;
}
<table>
<tr>
<th>Date</th>
<th>Name</th>
<th>Amount</th>
<th>Phone</th>
<th></th>
<th>Action 1</th>
<th>Action 2</th>
</tr>
<tr data-id="1">
<td>12-03-1990</td>
<td>Mark</td>
<td>50</td>
<td>1321132123</td>
<td></td>
<td><button data-action="edit" class="myBtn">Edit</button></td>
<td><button data-action="delete" class="myBtn">Delete</button></td>
</tr>
<tr data-id="1">
<td>01-12-1974</td>
<td>Tom</td>
<td>10</td>
<td>67567576</td>
<td></td>
<td><button data-action="edit" class="myBtn">Edit</button></td>
<td><button data-action="delete" class="myBtn">Delete</button></td>
</tr>
<tr data-id="3">
<td>15-06-1994</td>
<td>Jane</td>
<td>20</td>
<td>987897987</td>
<td></td>
<td><button data-action="edit" class="myBtn">Edit</button></td>
<td><button data-action="delete" class="myBtn">Delete</button></td>
</tr>
</table>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">CLOSE ME</span>
<form action="" method="post" onSubmit="return onFormSubmit();">
<p id="emp">
<input type="text" name="e_name" id="e_name" placeholder="name" value="" required style='text-transform:uppercase'>
<input type="text" name="e_amount" id="e_amount" placeholder="amount" value="" required style='text-transform:uppercase'>
</p>
<input type="submit" Value="Submit" name="submit" id="submit">
</form>
</div>
</div>
* “我想编辑全信息” * - 这调用'UPDATE'或'DELETE';不确定你想在这里做什么,以及相关的代码在哪里。 –
这不是问题的更新查询它关于该模式框不打开第二项我有循环问题。 –
看看你的开发者控制台然后看看是否有错误 –