参考$（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>