從javascript中刪除表格的相應行

Question

我創建了一個上傳方法，通過調用webservice從javascript自動上傳文件。由於這是一個自動上傳，我想添加一個刪除按鈕，以允許用戶刪除他們上傳的文件。所以這個過程是：

• 選擇文件，當onchange事件被觸發文件上傳通過調用Web服務（這是自動上傳）
• Webservice的響應是兩個字符串變量組成的對象
• 在成功我正在創建一行，通過返回的響應填充它並將其添加到現有的表中。
• 我想爲每行添加一個刪除按鈕，通過捕獲該行的相應值來刪除上傳的文件。所以我的問題是：當我點擊該行中的刪除按鈕時，如何捕獲適當的值？

下面是我的javascript代碼：

function UploadFiles() { 
if (window.FormData !== undefined) { 

       var fileUpload = $("#FileUpload1").get(0); 

       var files = fileUpload.files; 


       var fileData = new FormData(); 

       fileData.append(files[0].name, files[0]); 


       fileData.append('username', 'Test'); 

       $.ajax({ 
        url: 'MyWebservice.asmx/UploadImages', 
        type: "POST", 
        contentType: false, 
        processData: false, 
        data: fileData, 
        dataType: "text", 
        success: function (response) { 

         var xmlDoc = new DOMParser().parseFromString(response, "application/xml"); 
         var objElementSuccess = xmlDoc.getElementsByTagName("Success")[0]; 
         var textElementSuccess = objElementSuccess.childNodes[0]; 

         var objElementUpload = xmlDoc.getElementsByTagName("UploadedURL")[0]; 
         var textElementUpload = objElementUpload.childNodes[0]; 

         var tableBody = document.getElementById("Tab_UploadedFiles"); 
         tableBody.style.display = "inline"; 
         var tr = document.createElement('TR'); 

         var tdSuccess = document.createElement('TD'); 
         var tdUploadedFiles = document.createElement('TD'); 
         var tdButtonDelete = document.createElement('TD'); 

         tdSuccess.appendChild(document.createTextNode(textElementSuccess.nodeValue)); 
         tdUploadedFiles.appendChild(document.createTextNode(textElementUpload.nodeValue)); 
         tdButtonDelete.style.textAlign = "center"; 

// here I am adding the delete button .. what should I do here?     
// tdButtonDelete.innerHTML = '<input value ="Delete File" onclick="DeleteUploadedFile()" type="button" />'; 

         tr.appendChild(tdSuccess); 
         tr.appendChild(tdUploadedFiles); 
         tr.appendChild(tdButtonDelete); 

         tableBody.appendChild(tr); 
        }, 
        error: function (err) { alert(err.statusText); } 
       }); 

      } else { 
       alert("FormData is not supported."); 
      } 
     } 

下面是我的表：

<table id="Tab_UploadedFiles" class="Tab_UploadedFiles"> 
    <tr> 
     <th> 
      File Name 
     </th> 
     <th> 
      Status 
     </th> 
     <th> 
      Delete Uploaded File 
     </th> 
</tr> 
</table> 

Answer 1

當您創建的特定條目錶行，你可能需要添加一個唯一的標識符（例如id或名稱）到行的id屬性，如下所示：

<tr data-id="unique_number"> 
    <td>FileName</td> 
    <td>Status</td> 
    <td>Delete button</td> 
</tr> 

這樣，你可以聽按鈕的點擊事件，並要求父母的id（在你的情況下是tr元素的id），並使用該id與webservice進行通信，以便刪除要刪除的圖像。

另一種方法是檢查表中tr的索引。然而，這是一種「骯髒」的方式，因爲你永遠不可能100％，這總是正確的。

編輯：

獲取數據-ID，您可以執行以下操作：

var button = [code here to get the button] 

$(button).on('click', function(){ 

    var id = $(this).parent().data('id'); //get the parent of the delete button (the tr element) and get the value of the data property 'data-id' 

    //add the rest of your logic here 
});