Question

我有一个显示数据库数据的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中检索它的值。

我知道我无法正确构建这个问题。抱歉。

由于

Answer 1

这里有几个问题。首先，您需要使用class代替span而不是id，否则它将在您的PHP循环中在DOM中重复，这将导致无效的HMTL将破坏您的点击事件处理程序

完成后，您需要在点击处理程序中设置id变量值，以便找到与点击的元素相关的td 。你可以这样做：

 <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"); } }); });

Answer 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
});

使用AJAX从数据库中删除记录

2 个答案: