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">&times;</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>

來源

2017-04-10 Sandeep Singh

* 「我想編輯全信息」 * - 這調用'UPDATE'或'DELETE';不確定你想在這裏做什麼，以及相關的代碼在哪裏。 –

這不是問題的更新查詢它關於該模式框不打開第二項我有循環問題。 –

看看你的開發者控制檯然後看看是否有錯誤 –

首先我們需要一個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>

來源

2017-04-10 20:20:50 loelsonk

回答

相關問題