Удаление правильной строки на кнопке Нажмите

Question

У меня есть 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(); 
    } 

?> 

Answer 1

Проблема заключается в том, что у вас есть заголовок таблицы имеет rowInde x ноль, тогда как фактическая строка начинается с rowIndex. например

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

Отредактированный ответ, так как я читал проблему слишком быстро.

Answer 2

Вам необходимо посмотреть на свою базу данных при удалении строки. Является ли строка успешно удаленной той, которую вы хотите удалить? Если это так, то проблема не в том, что данные передаются в базу данных, но ваш 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

Answer 3

Проблема заключается в вашем JS-коде, учитывая, что HTML-код является правильным. Я только что изменил последнюю строку, удалив событие клика, и добавление атрибута 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); 
     } 
    }); 

    }); 

Если вы получаете ошибки, пожалуйста, комментарий
Спасибо