删除按钮上的正确行单击

时间:2017-02-17 20:09:30

标签: javascript php html ajax sql-delete

我的程序中有一个4列表,其中一列是一列,每行都有一个删除按钮。每当我单击删除按钮时,我希望它删除相应的行并通过AJAX发送删除查询,删除数据库中的该行。

现在看来发生的事情就是每当我点击删除按钮,它正在删除它上面的行,或者如果我删除了上面没有行的顶行,它根本不删除,我这样做不想要。

我的控制台没有错误。尽管如此,我每次都会得到一条成功的row deleted消息。

那么如何解决这个问题并使删除工作,以便删除与按钮所在位置对应的行?

表格的HTML以及删除按钮:

<table id="skuTable" cellspacing="5" class="ui-widget ui-widget-content">
<thead>
    <tr class="ui-widget-header">
        <th class="skuRow">SKU Group</th>
        <th class="skuRow">Group ID</th>
        <th class="skuRow">Edit</th>
        <th class="skuRow">Delete</th>
    </tr>
</thead>
<tbody>

    <?php foreach ($dbh->query($query) as $row) {?>

    <tr>
        <td class="sku_group" id="sku_group-<?php echo intval ($row['SKU Group'])?>"><?php echo $row['SKU Group'];?></td>
        <td class="group_id" align="center" id="group_id-<?php echo intval ($row['Group_ID'])?>"><?php echo $row['Group_ID'];?></td>
        <td><button type="button" class="edit" name="edit">Edit</button></td>
        <td><button type="button" class="delete" onclick="deleteRow(this)">Delete</button></td>
    </tr>

<?php } ?>

</tbody>

JavaScript的:

function deleteRow(r) {

if (confirm('Are you sure you want to delete this entry?')) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("skuTable").deleteRow(i);
  }


    request = $.ajax({
      type: "POST",
      url: "delete.php",
      data: "Group_ID="+i
    });


        request.done(function (response, textStatus, jqXHR){
          if(JSON.parse(response) == true){
            console.log("row deleted");
          } else {
            console.log("row failed to delete");
          }
        });

        // Callback handler that will be called on failure
        request.fail(function (jqXHR, textStatus, errorThrown){
            // Log the error to the console
            console.error(
                "The following error occurred: "+
                textStatus, errorThrown
            );
        });

        // Callback handler that will be called regardless
        // if the request failed or succeeded
        request.always(function () {

        });


}

delete.php:

<?php

  $SKU_Group = $_POST['SKU Group'];
  $Group_ID = $_POST['Group_ID'];

  $host="xxxxxxxxxx"; 
  $dbName="xxxxxx"; 
  $dbUser="xxxxxxxxxxxx"; 
  $dbPass="xxxxx";

  $pdo = new PDO("sqlsrv:server=".$host.";Database=".$dbName, $dbUser, $dbPass);

  $delete = "DELETE FROM SKU_Group_Dim WHERE Group_ID = '$Group_ID'";

  $stmt = $pdo->prepare($delete);
  $result = $stmt->execute();
  echo json_encode($result);
  if(!$result) {
      echo sqlsrv_errors();
  }

?>

3 个答案:

答案 0 :(得分:0)

问题是你的表头有rowIndex为零,而实际的行从rowIndex开始。 e.g。

 request = $.ajax({
  type: "POST",
  url: "delete.php",
  data: "Group_ID="+i+1
});

编辑的答案,因为我读得太快了。

答案 1 :(得分:0)

删除行时需要查看数据库。该行是否已成功删除要删除的行?如果是这样,那么问题不在于数据被传递到数据库,而是你的javascript没有得到正确的i = r.parentNode.parentNode.rowindex需要改变。

在你的HTML中

<?php foreach ($dbh->query($query) as $row) {?>

    <tr value = "<?php echo $row['Group_ID'];?>"> 

然后在你的JS中避免使用rowIndex使用

i = r.parentNode.parentNode.value()  

实际上我会在这里使用不同于parentNode的调用但是试图坚持你的代码

否则你的问题将是传入数据库的group_id的值,并且与html表中的索引值不匹配,无论是i还是i + 1

答案 2 :(得分:0)

问题看起来就像在你的JS代码中,考虑到你的HTML是正确的输出我只是通过删除click事件并添加了一个data-group-id属性来改变最后一行也在表行上添加了一个类

<table id="skuTable" cellspacing="5" class="ui-widget ui-widget-content">
<thead>
    <tr class="ui-widget-header">
        <th class="skuRow">SKU Group</th>
        <th class="skuRow">Group ID</th>
        <th class="skuRow">Edit</th>
        <th class="skuRow">Delete</th>
    </tr>
</thead>
<tbody>

    <?php foreach ($dbh->query($query) as $row) {?>

    <tr class="row<?php echo intval($row['Group_ID'])?>" >
        <td class="sku_group" id="sku_group-<?php echo intval ($row['SKU Group'])?>"><?php echo $row['SKU Group'];?></td>
        <td class="group_id" align="center" id="group_id-<?php echo intval ($row['Group_ID'])?>"><?php echo $row['Group_ID'];?></td>
        <td><button type="button" class="edit" name="edit">Edit</button></td>
        <td><button type="button" class="delete" data-group-id="<?php echo intval($row['Group_ID'])?>">Delete</button></td>
    </tr>

<?php } ?>

</tbody>

JS代码

   $(".delete").on("click", function() {
     var group_id = $(this).data("group-id");
     $.ajax({
      type: "POST",
      url: "delete.php",
      data: "Group_ID="+group_id,
      success: function(response) {
             if(response == true)
                  $(".row"+group_id).remove();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
           alert("Status: " + textStatus); alert("Error: " + errorThrown); 
      }
    });

   });

如果您收到错误,请发表评论 感谢