2017-02-17 63 views
1

我在我的程序中有一个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(); 
    } 

?> 
+0

有可能是没有足够的HTML这个问题。如果你使用表单来处理这个数据或者不把它当作一个数组,那么它可能没有隐藏的元素(行),这是一种经常使用的方法。 –

+0

我发布了包含删除按钮的表格的HTML,如果这有帮助的话......我在我的程序中使用了一个表格,但它不包含表格,因为它处理搜索功能 – Rataiczak24

+0

你有'id =“group_id”与'group_id'小写,但使用'data:“Group_ID =”+ i'与'Group_ID'混合使用。听起来像这就是问题所在或者是贡献者。 –

回答

0

问题是,你有表头有rowInde实际行开始时为零,然后从rowIndex开始。例如

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

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

+0

修正代码的样子是什么? – Rataiczak24

+0

这似乎不适用于我 – Rataiczak24

+0

检查什么控制台日志打印为变量我点击删除时。 – Janne

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表中的索引的值是否是我或我+ 1

+0

我收到一个错误,说'r.parentNode.parentNode.value()'不是一个函数 – Rataiczak24

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

    }); 

如果你得到错误请评论
感谢

相关问题