使用AJAX删除HTML表格行

Question

• 使用的框架：JavaScript、AJAX、HTML无法使用JQuery

• 必须在页面上显示SQL表

• 表格的最后一列应包含一个图像，其作用类似于删除按钮

• 单击该删除图像后，该行应从HTML表和SQL表中删除

• 在我的代码中，onClick不工作

HTML代码

通过循环sql查询结果的行来显示表行。

<td>
<span class="delete" onClick="divFunction()" data-id="<?= $id; ?>"
><img src="delete.png"
/></span>
</td>

JavaScript代码

document.addEventListener("DOMContentLoaded", function () {
function divFunction() {
// Storing element that will be deleted
var el = document.getElementById("delete");
var deleteid = el.getAttribute("data-id");
// Creating AJAX request
var params = "id=" + deleteid;
var request = new XMLHttpRequest();
request.open("POST", "remove.php", true);
request.setRequestHeader(
"Content-type",
"application/x-www-form-urlencoded"
);
request.send(params);
el.remove();
}
});

PHP代码

文件名：remove.php

if (($con = mysqli_connect("localhost", "user", "password", "database", "port"))==false) {
die(mysqli_connect_error());
}
$id = 0;
if (isset($_POST['id'])) {
$id = mysqli_real_escape_string($con,$_POST['id']);
}
// Delete the row
$query = "DELETE FROM Coorporations WHERE id='".$id."'";
mysqli_query($con,$query);
mysqli_free_result($result);
mysqli_close($conn);
exit;

Answer 1

看起来你可能把事情搞得有点太复杂了。假设您有下表：

<table>
<tr>
<td>
<!-- 
Let's not define any onclick handlers here, 
we'll do that in an instant. 
For demonstration purposes, let's give all elements 
a hardcoded id.
-->
<span class='delete' data-id='1'>Delete entry</span>
</td>
</tr>
<tr>
<td>
<span class='delete' data-id='2'>Delete entry</span>
</td>
</tr>
</table>

在HTML文档底部的<script>标记中，或者在单独的文件中，您可能需要尝试：

// Grab all elements taht should fire an event when clicked  
let elements = document.querySelectorAll('span.delete');
for (let i = 0; i < elements.length; i++) {
// Attach an event listener to them    
elements[i].addEventListener('click', function(e) {
// 'e' is the event object itself, 'target' the one
// that triggered the event in the first place, i.e.
// one of those <span> elements.
let element = e.target
let id      = e.target.dataset.id;
console.log(id);
// AJAX stuff
// ...
});
}

另请参阅：

• addEventListener与onclick
• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
• https://developer.mozilla.org/en-US/docs/Web/API/Event/target
• https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Answer 2

我试着猜测一下。元素中缺少deleteid，但不应该使用该id，因为这只会返回第一个匹配的元素。(html标准将id定义为唯一的(

您可能希望尝试使用传递的目标，而不是var el = document.getElementById("delete");。

此外，正如@legacybass所指出的，您不应该在DOMContentLoaded侦听器触发的方法中定义该函数，因为它不会被提升。

function divFunction(event) {
// Storing element that will be deleted
var el = event.target;
var deleteid = el.getAttribute("data-id");
// Creating AJAX request
var params = "id=" + deleteid;
var request = new XMLHttpRequest();
request.open("POST", "remove.php", true);
request.setRequestHeader(
"Content-type",
"application/x-www-form-urlencoded"
);
request.send(params);
el.remove();
}

事实上，如果id是由服务器呈现的，您甚至可以直接传递它。

<td>
<span class="delete" onClick="divFunction(<?= $id; ?>)" data-id="<?= $id; ?>"
><img src="delete.png"
/></span>
</td>

JavaScript代码

function divFunction(deleteid) {
// Creating AJAX request
var params = "id=" + deleteid;
var request = new XMLHttpRequest();
request.open("POST", "remove.php", true);
request.setRequestHeader(
"Content-type",
"application/x-www-form-urlencoded"
);
request.send(params);
el.remove();
}