參考$（this）.parent.parent.children（'td'）。attr（'key'）

Question

<script> 
    $('#RemoveColumn').click(function(){ 
     R_C($(this)); 
    }); 
    R_C = function(e){ 
     for(var i = 0; i <= $(e).parent().parent().child('td').length - 1; i++){ 
      if($(e).parent().parent().child('td:eq(i)').attr(id) != undefined){ 
       K_ID = $(e).parent().parent().child('td:eq(i)').attr(id); 
       $('#' + K_ID).parent.remove(); 
      } 
     } 
    } 
</script> 
<table> 
    <tr> 
     <td id='key'>1</td> 
     <td>TIM</td> 
     <td>Smith</td> 
     <td><button id='RemoveColumn'>Remove</button></td> 
    </tr> 
    <tr> 
     <td id='key'>2</td> 
     <td>James</td> 
     <td>Smith</td> 
     <td><button id='RemoveColumn'>Remove</button></td> 
    </tr> 
    <tr> 
     <td id='key'>3</td> 
     <td>Scott</td> 
     <td>Smith</td> 
     <td><button id='RemoveColumn'>Remove</button></td> 
    </tr> 
</table> 

在這個例子中我有一個表格，每行有幾個TD標籤和最後一個TD在每一行都有一個「刪除」按鈕。點擊時，我需要看父母TR並獲得TD的數量，以便我可以設置for循環。然後在該循​​環中檢查具有密鑰ID的所有TD標籤。

然後，我可以將其插入到我的最終目標中，即讓SQL語句從數據庫表中刪除該記錄。因此，爲什麼我需要點擊刪除按鈕行中的密鑰ID。

我不知道如何在以$（e）格式傳遞jQuery對象時傳達父級TR的TD兒童。

任何人有任何想法？

更新 - 發行完成

謝謝大家，我能夠今天完成這個工作搞定。我結束了這樣的事情。

<script> 
    T_R_R = function(e){ 
     var T_R_R_T_N = $('#T_S').val(); 
     var T_R_R_K_N = $('#S_T_R #T_H').closest('tr').find('td[id]').html(); 
     var T_R_R_K_V = $(e).closest('tr').find('td[id]').html(); 
     var N_T = T_R_R_T_N + " WHERE " + T_R_R_K_N + " = '"+ T_R_R_K_V + "'"; 
     $.get('/DataBase/Remove_Record/' + N_T, function(res) { 
      if (res.status) { 
       console.log('Record Removed'); 
       Get_Table_Headers($('#T_S')); 
      } else { 

      }; 
     }); 
    }; 
</script> 

這將被用來發送一個MySQL命令 DELETE FROM [表名] WHERE [KEY_NAME] = '[Key_Value]'

Answer 1

請注意，您的重複元素的ID無效HTML，和你的代碼將永遠不會工作，而你有它們，因爲jQuery選擇器只能識別第一個重複的元素。最好使用類來做到這一點。在下面的代碼片段中，我更改了tds的「id」，它將它作爲實際ID（與內容相同），然後它們是唯一的，並且更容易檢索ID。我使用了一個提醒來演示檢索的ID。

$(function() { 
 
    $('.RemoveColumn').click(function() { 
 
    R_C($(this)); 
 
    }); 
 
    R_C = function(e) { 
 
    var tr = e.closest("tr"); 
 
    alert(tr.find('td[id]').attr("id")); //the "find" gets any <td>s which have an ID property, regardless of its value. So as long as there's only one <td> with an ID within the <tr>, this will work 
 
    tr.remove(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td id='1'>1</td> 
 
    <td>TIM</td> 
 
    <td>Smith</td> 
 
    <td><button class='RemoveColumn'>Remove</button></td> 
 
    </tr> 
 
    <tr> 
 
    <td id='2'>2</td> 
 
    <td>James</td> 
 
    <td>Smith</td> 
 
    <td><button class='RemoveColumn'>Remove</button></td> 
 
    </tr> 
 
    <tr> 
 
    <td id='3'>3</td> 
 
    <td>Scott</td> 
 
    <td>Smith</td> 
 
    <td><button class='RemoveColumn'>Remove</button></td> 
 
    </tr> 
 
</table>

注：你可以使代碼更簡單由具有ID爲按鈕本身的數據屬性：

<button class='RemoveColumn' data-id="1">Remove</button> 

，然後你可以刪除

alert(tr.find('td[id]').attr("id")); 

，並用簡單的

alert(e.data("id")); 

更換

Answer 2

你應該把ID作爲在按鈕的屬性。

<table> 
    <tr> 
     <td class='key'>1</td> 
     <td>TIM</td> 
     <td>Smith</td> 
     <td><button id="1" class='RemoveColumn'>Remove</button></td> 
    </tr> 
</table> 

點擊我們esomething這樣的：

$("button").click(function() { 
    var id = $(this).prop('id'); 
    // Here you send a HTTP POST request with the ID to the backend. 
    // On successfull delete, just remove the row like this: 
    $(this).closest ('tr').remove(); 
}); 

你也可以你數據 - 屬性

<td><button data-id="1" class='RemoveColumn'>Remove</button></td> 

並使用該查詢

var id = $(this).data('id'); 

Answer 3

獲取ID首先，使用類而不是ID。

然後，如果你只是想刪除按鈕點擊該行，你的腳本可以減少這樣的：

$('.RemoveColumn').click(function(){ 
 
    var rowNumber = $(this).parents("tr").find("td").first().html(); 
 
    console.log("Row # "+rowNumber+" deleted."); // The row number 
 
    $(this).parents("tr").remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>TIM</td> 
 
     <td>Smith</td> 
 
     <td><button class='RemoveColumn'>Remove</button></td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>James</td> 
 
     <td>Smith</td> 
 
     <td><button class='RemoveColumn'>Remove</button></td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Scott</td> 
 
     <td>Smith</td> 
 
     <td><button class='RemoveColumn'>Remove</button></td> 
 
    </tr> 
 
</table>