JavaScriptからテーブルの適切な行を削除します

Question

webserviceを呼び出すことによってjavascriptから自動的にファイルをアップロードするアップロードメソッドを作成しました。自動アップロードであるため、ユーザーがアップロードしたファイルを削除できるように削除ボタンを追加します。だから、このプロセスは次のとおりです。

• は、Webサービスの応答が成功した二つの文字列変数
• で構成されるオブジェクトです
• （それは自動アップロードです）のonchangeイベントが発生したときに、ファイルがWebサービスを呼び出すことによってアップロードされ、ファイルを選択します私は単一の行を作成し、返されたレスポンスでそれを埋めて、それを既存のテーブルに追加します。
• この行の適切な値をキャッチして、アップロードされたファイルを削除する削除ボタンを各行に追加します。だから私の質問です：私はその行の削除ボタンをクリックするたびに適切な値をキャッチすることができますか？以下は

私の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やnameなど）をその行のid属性に追加すると、次のようになります。

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

そうすれば、ボタンのクリックイベントを聞き、親のid（あなたの場合はtr要素のid）に問い合わせ、そのidを使って削除する画像をWebサービスと通信することができます。

これを行う別の方法は、テーブル内のtrのインデックスを確認することです。しかし、100％になることはできないので、これは「汚い」方法です。これは常に正しい方法です。

はEDIT：

は、データ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 
});