我有一个显示数据库数据的PHP文件。我使用while()
来显示每条记录。
我的PHP文件:
<?php
$flightTicketsSQL = "SELECT * FROM `flightbookings` WHERE username='$user' AND cancelled='no'";
$flightTicketsQuery = $conn->query($flightTicketsSQL);
while($flightTicketsRow = $flightTicketsQuery->fetch_assoc()) { ?>
<tr>
<td class="tableElementTags text-center"><?php echo $flightTicketsRow["bookingID"]; ?></td>
<td class="tableElementTags text-center"><?php echo $flightTicketsRow["origin"]; ?></td>
<td class="tableElementTags text-center"><?php echo $flightTicketsRow["destination"]; ?></td>
<td class="tableElementTags text-center"><?php echo $flightTicketsRow["date"]; ?></td>
<td class="tableElementTags text-center"><?php echo $flightTicketsRow["mode"]; ?></td>
<td class="text-center"><span class="fa fa-remove tableElementTags pullSpan" id="deleteAccount"></span></td>
</tr>
<?php } ?>
如果用户点击最后一个<td>
(带有Font Awesome图标的那个),我希望从数据库中删除具有特定bookingID的记录。
要做到这一点,我需要使用jQuery .val()
我的JS档案:
var id = $("**WHAT DO I PUT HERE ?**").val();
$('#deleteAccount').click(function() {
$.ajax({
type: "POST",
url: 'cancelTicket.php',
data: { bookingID : id },
success : function() {
alert("Cancelled");
}
});
});
我的cancel.php文件:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$user = $_SESSION["username"];
$id = $_POST["bookingID"];
$cancelFlightBookingsSQL = "UPDATE `flightbookings` SET cancelled='yes' WHERE bookingID='$id'";
$cancelFlightBookingsQuery = $conn->query($cancelFlightBookingsSQL);
我的问题是如何让jQuery识别用户想要取消的预订?我的意思是如何为<td>
分配一个id,以便我可以在JS中检索它的值。
我知道我无法正确构建这个问题。抱歉。
由于
答案 0 :(得分:3)
这里有几个问题。首先,您需要使用class
代替span
而不是id
,否则它将在您的PHP循环中在DOM中重复,这将导致无效的HMTL将破坏您的点击事件处理程序
完成后,您需要在点击处理程序中设置id
变量值,以便找到与点击的元素相关的td
。你可以这样做:
<!-- repeated throughout your while loop -->
<td class="text-center">
<span class="fa fa-remove tableElementTags pullSpan deleteAccount"></span>
</td>
$('.deleteAccount').click(function() {
var id = $(this).closest('tr').find('td:first').text().trim();
$.ajax({
type: "POST",
url: 'cancelTicket.php',
data: {
bookingID: id
},
success: function() {
alert("Cancelled");
}
});
});
答案 1 :(得分:2)
来自点击的元素:
$('#deleteAccount').click(function() {
您可以导航DOM以查找所需的元素。首先,为该目标元素添加一个类:
<td class="tableElementTags text-center bookingID"><?php echo $flightTicketsRow["bookingID"]; ?></td>
接下来,还将该预订ID值放在数据属性中,以便于编程访问(个人偏好,因为文本内容之类的内容很容易改变):
<td class="tableElementTags text-center bookingID" data-booking="<?php echo $flightTicketsRow["bookingID"]; ?>"><?php echo $flightTicketsRow["bookingID"]; ?></td>
现在,在单击处理程序中,您可以将DOM向上导航到最近的公共父元素,然后使用所需数据向下返回到目标元素。像这样:
$('#deleteAccount').click(function() {
var id = $(this).closest('tr').find('.bookingID').data('booking');
// the rest of your click handler
});