引用 $(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 循环。然后，在此期间，检查所有TD标签以查找具有密钥ID的标签。

然后，我可以将其插入我的最终目标中，即拥有一个将从数据库表中删除该记录的 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 命令发送到 从 [表名] 中删除，其中 [Key_Name] = "[Key_Value]">

Answer 1

您应该将 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>

点击我们，像这样：

$("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>

并使用此查询获取 id

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

Answer 2

首先，使用类而不是 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>

Answer 3

请注意，您的重复元素 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"));