如何從數據庫中刪除數據，PHP，AJAX，JavaScript（沒有jQuery的）

Question

我正在嘗試從數據庫中刪除數據，但是當我單擊刪除按鈕時，它會刪除第一行而不是我要單擊的位置。 我的PHP代碼：

<?php
    $connect = mysqli_connect("localhost","root","","abu");
    if($connect){
        $showdata = mysqli_query($connect,"SELECT * FROM dealers");
        if(mysqli_num_rows($showdata)>0){
            $i = 1;
            while($rows = mysqli_fetch_assoc($showdata)){
                echo "<tr>";
                echo "<td>".$i."</td>";
                echo "<td>".$rows["dealer_name"]."</td>";
                echo "<td><button onclick='deleteproduct()' class='delete'>Delete</button><input type='hidden' id='productid' vlaue='".$rows["id"]."'></td>";
                echo "</tr>";
                $i++;
            }
        }else {
            echo "<center><i>No Dealers to show</i></center>";
        }
    }
?>

這是我的ajax代碼：

function deleteproduct(){
    if(window.XMLHttpRequest){
        http = new XMLHttpRequest();
    }else {
        http = new ActiveXObject("Microsoft.XMLHTTP");
    }


    http.onreadystatechange = function(){
        if(http.readyState == 4 && http.status == 200){
            document.getElementById("alerts").innerHTML = http.responseText;
        }
    }

    var delid = document.getElementById("productid").value;
    var file = "assets/php/addproduct_deletedata.php";
    var senddata = "productid="+delid;

    http.open("POST",file,true);
    http.setRequestHeader("content-type","application/x-www-form-urlencoded");
    http.send(senddata);
}

我希望當我單擊刪除按鈕時，它會刪除我沒有單擊其他行的行。

Answer 1

1. 因為它是“值”而不是“ vlaue”;）

輸入type =' hidden'id =' productid'vlaue ='“。$ rows [” id“]。”'

2.您正在遍歷結果集並打印出ID為“ productid”的輸入字段。

在您的代碼中， 每個列都有相同的 ID。 這就是您的JavaScript無法正常運行的原因。 ID必須是唯一的 。

您需要發送值（產品ID）作為功能參數。 像這樣做：

<input type="hidden" onclick="deleteproduct(this.value)" value="$yourRowId"/>

要么

<input type="hidden" onclick="deleteproduct($yourRowId)" />

這就是您如何在JS中檢索值的方法：

<script type="text/javascript">
function deleteproduct(id)
{
    alert(id); // your product ID
}
</script>

Answer 2

首先，您不能在同一頁面上分配相同的ID超過一​​個元素 。

瀏覽器不會介意，但是會使HTML無效。 您可以為此使用class屬性。

您可以在此處在線驗證HTML

echo "<td><button onclick='deleteproduct()' class='delete'>Delete</button><input type='hidden' id='productid' vlaue='".$rows["id"]."'></td>";

根據您的需求，您可以使用錨標記而不是使用帶有隱藏輸入字段的表單來減小DOM大小，並在單擊時調用該函數，然后將productId作為參數傳遞給該函數。

這是代碼：

<?php
    $connect = mysqli_connect("localhost","root","","abu");
    if($connect){
        $showdata = mysqli_query($connect,"SELECT * FROM dealers");
        if(mysqli_num_rows($showdata)>0){
            $i = 1;
            while($rows = mysqli_fetch_assoc($showdata)){
                echo "<tr id='row-".$rows["id"]."'>";
                echo "<td>".$i."</td>";
                echo "<td>".$rows["dealer_name"]."</td>";
                echo "<td><a href='#' onclick='return deleteproduct(".$rows["id"].")'>Delete</a></td>";
                echo "</tr>";
                $i++;
            }
        }else {
            echo "<center><i>No Dealers to show</i></center>";
        }
    }
?>

JavaScript的：

function deleteproduct( delId ){
   var tableRowId = 'row-'+delId;

   // you got delId and tableRowId to remove the table row 

   // do ajax stuff here...


   return false;
}

讓我知道進展如何。