Question

我有一个播放器数据表，每行旁边都有一个删除按钮。单击该按钮时，应立即使用jQuery删除该特定行。到目前为止我已经包含了我的代码。应该点击按钮时我真的卡住了。我应该使用标题功能吗？

的index.php

const Component: React.StatelessComponent<Props> = (props: IProps): JSX.Element =>

的script.js

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css"></link>
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/script.js"></script>
    </head>
<body>
    <!-- Create a table-->
    <table style width="800" border="1" cellpadding="1" cellspacing="1"> 
    <!-- Create headings. Every row is defined as with <tr> tag-->
    <!-- Create headings. Every row is defined as with <tr> tag-->
    <tr>
    <th>Player ID</th>
    <th>Player Name</th>
    <th>Player Position</th>
    <th>Delete</th>
    </tr>

    <?php
        require "php/conn.php";
        //Select query
        $res = $db -> query ("SELECT * FROM player");
        //Set pointer to 1
        $res -> data_seek(0);
        //Display data using while loop
        while ($row = $res -> fetch_assoc()) {
            // Write html code in php using this method
            echo "<div class = 'row'>";
            echo "<tr>";
            echo "<td>".$row['id']."</td>";
            echo "<td>".$row['surname']."</td>";
            echo "<td>".$row['position']."</td>";
            echo "<td><button id = 'dlt_btn' type='button'>Delete</button></td>";
            echo "</tr>";
            echo "</div>";


        }



    ?>

</body>

delete.php

$(document).ready(function () { 

    $("#dlt_btn").click(function(){
        //Activate 'delete.php'
    });

});

Answer 1

您应该在此上下文中使用类vs ID，但您可以使用$（this）来定位单击的元素，并通过.parent（）jquery方法遍历/删除。这纯粹是为了从DOM中删除行，您需要执行ajax请求来告诉服务器从数据库中删除哪一行。在这种情况下，您应该将行ID属性添加到html，并将其与AJAX请求一起发送。

您可以将按钮中的行ID作为属性附加，例如

<button id = 'dlt_btn' type='button' row-id='<?=$yourRowID%>'>Delete</button>

$(document).ready(function () { 

    $("#dlt_btn").click(function(){
        let rowId = $(this).attr('row-id'); //Pull the attribute from your button
        let tr =  $(this).parent().parent(); //Define the TR itself

        $.post('/delete.php', {row_id:  rowId}, function(result){
          //Do something with the message your page returns after deleting
          tr.remove(); //Remove the TR from the dom
        });
    });

});

Answer 2

使用DOM操作：

$(document).ready(function(){
  $("#dlt_btn").click(function () {
     var deleteRow = $(this)
     deleteRow.parents('.row').fadeOut(200);
  });
})

如果你想从数据库中删除。当函数同时运行时，在php中触发另一行代码

Answer 3

<强>的index.php

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css"></link>
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/script.js"></script>
    </head>
<body>
    <!-- Create a table-->
    <table style width="800" border="1" cellpadding="1" cellspacing="1"> 
    <!-- Create headings. Every row is defined as with <tr> tag-->
    <!-- Create headings. Every row is defined as with <tr> tag-->
    <tr>
    <th>Player ID</th>
    <th>Player Name</th>
    <th>Player Position</th>
    <th>Delete</th>
    </tr>

    <?php
        require "php/conn.php";
        //Select query
        $res = $db -> query ("SELECT * FROM player");
        //Set pointer to 1
        $res -> data_seek(0);
        //Display data using while loop
        while ($row = $res -> fetch_assoc()) {
            // Write html code in php using this method
            echo "<div class = 'row'>";
            echo "<tr>";
            echo "<td>".$row['id']."</td>";
            $player_id = $row['id'];
            echo "<td>".$row['surname']."</td>";
            echo "<td>".$row['position']."</td>";
            echo "<td><button id = 'dlt_btn' value = ". $row['id'] . " type='button'>Delete</button></td>";
            echo "</tr>";
            echo "</div>";


        }




    ?>

</body>

<强>的script.js

$(document).ready(function () { 

    $("#dlt_btn").click(function () {
        // The '$.ajax' function is used to perform a asynchronous HTTP request
        $.ajax({
            url: 'delete.php',
            //The type of request to make, which can be either “POST” or “GET”
            type: 'post',
            //data: the data to be sent to the server when performing the Ajax request i.e. You are sending the 'id' of the friends_list to the 'likes.php' file.
            //'val' = returns or sets the value attribute of the #selected elements 
            //$(selector).val() = Returns the value attribute
            //the 'id' refers to the 'id' variable in 'likes.php'
            //Follows a {key:value} format. E.g. id('KEY'): $("#id").val()} ('VALUE');
            //N.B! The key is the the field/column name in database, hence key = 'id'
            data: {id : $("#dlt_btn").val()},
            //success: A function to be called if the request succeeds
            success: function(result) 
            {
                //Reload the current document:
                location.reload();
            }
        });
    });
});

<强> delete.php

<?php
require "php/conn.php";
$player_id = $_POST['id'];

$stmt = $db -> prepare ("DELETE FROM player WHERE id = $player_id");
$stmt -> execute();

?>

使用jquery单击按钮时如何删除特定行？

3 个答案: