Ajax成功後刪除表格行

我有一個表格，它將顯示存儲在數據庫中的圖像以及其他一些信息。我有一個列有一個鏈接，用戶可以點擊刪除圖像，但這很好地工作，但是當用戶這樣做時，我也想刪除用戶選擇刪除的行，但我似乎無法得到它工作。Ajax成功後刪除表格行

function removeSectionPhoto(image, section_id) { 

    if(confirm("Are you sure you want to delete this image?") == true) { 

     $.ajax({ 
      type: "POST", 
      url: "remove_section_photo.php", 
      data: 'image='+image+'&sectionID='+section_id, 

      success: function(data){ 
       //this is supposed to remove the row but currently doesnt work 
       $("#"+$(this).data("remove-row")).remove(); 
      } 
     }); 
    } 
}

表中的行正在從PHP輸出，這是錶行的一個樣子：

echo "<tr id='fac_sec_photo_row". $imageRowCount ."'>"; 
echo "<td><a><img class='section_photo' src='" . $sectionPhotoRow['photo'] . "' alt='Section Photos' height='50' width='50'</a></td>"; 
echo "<td><input type='text' id='photoDesc' name='photoDesc[]' value='" . $sectionPhotoRow['photo_desc'] . "'</td>"; 
echo "<td><input type='file' id='new_section_photo' name='new_section_photo[]' onchange='displaySecImage(this)'></td>"; 
echo "<td><a href='#' class='removeImageRow' data-remove-row='fac_sec_photo_row". $imageRowCount . "' onClick='removeSectionPhoto(\"". $sectionPhotoRow['photo'] ."\", \"". $facilitySecId ."\")'>Remove</a></td>"; 
echo "</tr>";

什麼我做錯了，我怎麼能刪除選定的錶行？

來源

2015-05-26 Zoxac

所有權利。我看到了這個問題的一部分。你正在混合香草JavaScript與jQuery。 Jquery在後臺隱藏了JavaScript不能做的事情。由於您在元素上內嵌了一個香草onclick，因此this可能指的是window，而不是被點擊的元素（我知道，令人困惑）。 Jquery使用function.prototype.apply方法將this重新映射到目標元素。 Javascript沒有。但一切都不會丟失，並且有一個簡單的解決方法。最簡單的方法就是將$imageRowCount傳遞給你的函數。然後你可以直接引用這個id。

function removeSectionPhoto(image, section_id, row_id) { 

    if(confirm("Are you sure you want to delete this image?") == true) { 

     $.ajax({ 
      type: "POST", 
      url: "remove_section_photo.php", 
      data: 'image='+image+'&sectionID='+section_id, 

      success: function(data){ 
       //this is supposed to remove the row but currently doesnt work 
       $("#"+row_id).remove(); 
      } 
     }); 
    } 
}

然後：

echo "<td><a href='#' class='removeImageRow' onClick='removeSectionPhoto(\"{$sectionPhotoRow['photo']}\", \"{$facilitySecId}\", \"fac_sec_photo_row{$imageRowCount}\")'>Remove</a></td>";

另一種選擇是在this通過在onclick='removeSectionPhoto(this, ...etc...)'函數調用，這將使你的第一個參數（或任何參數號傳遞給它的）參考到那個變量。然後$(ele).closest('tr').remove()會工作。

真的，不應該混合香草js和jquery。只需使用jquery查詢元素並使用它的事件處理程序，這不會是一個問題（嗯，您仍然需要映射this到self）。

來源

2015-05-26 15:22:13

太棒了！這對我很有幫助，非常感謝我在這裏學到的很多很好的解釋！另一個很快的問題是，如果你不介意的話，我注意到在我的PHP回聲中，你改變了我對事物的整理方式，並且你還加了'{}'，你能解釋一下嗎？ – Zoxac

@BigRabbit這只是偏好。你可以做到這一點，我只是發現使用大括號更具可讀性。通常雙引號內的變量被轉換爲它們的值。因此'echo「$ test」;'會輸出'something'，後面是'$ test'內的任何值。然而'echo「$ testsomething」'會導致問題，因爲變量是'$ test'。所以你可以用大括號將變量包裝起來，以表示「這裏面是變量」。它也使得數組以內聯方式工作，如：'echo「{$ test ['key']}」;'如果沒有大括號就會出錯（您也可以刪除鍵的引號）。 –

Ayy，甜心！我不知道那是一件事，非常整潔！再次感謝！ – Zoxac

通過$ imageRowCount作爲第三個參數到函數，然後刪除該行這樣

echo "<td><a href='#' class='removeImageRow' data-remove-row='fac_sec_photo_row". $imageRowCount . "' onClick='removeSectionPhoto(\"". $sectionPhotoRow['photo'] ."\", \"". $facilitySecId ."\", \"". $imageRowCount ."\")'>Remove</a></td>"; 


function removeSectionPhoto(image, section_id,imageRowCount) { 
    if(confirm("Are you sure you want to delete this image?") == true) { 

    $.ajax({ 
     type: "POST", 
     url: "remove_section_photo.php", 
     data: 'image='+image+'&sectionID='+section_id, 

     success: function(data){ 
      //this is supposed to remove the row but currently doesnt work 
      $("#fac_sec_photo_row"+imageRowCount).remove(); 
     } 
     }); 
    } 
}

來源

2015-05-26 15:02:55 l0ckm4

Ajax成功後刪除表格行

回答

相關問題