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

在这个例子中，我有一个 table 设置，每行都有几个 TD 标签，每行的最后一个 TD 有一个 "Remove" 按钮。单击时，我需要它查看父 TR 并获取 TD 的数量，以便我可以设置 for 循环。然后在该 for 循环期间检查所有 TD 标签是否具有密钥 ID。

然后我可以将其插入到我的最终目标中，即拥有一个 SQL 语句，该语句将从数据库 table 中删除该记录。因此，为什么我需要单击删除按钮所在行的密钥 ID。

我不知道如何在传递 jquery $(e) 格式的对象时引用父 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 命令到从 [TableName] 中删除 [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

首先，使用类而不是 ids。

然后，如果您只想删除按钮点击时的行，您的脚本可以这样减少：

$('.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，并且您的代码在拥有这些 ID 时将永远无法运行，因为 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>

N.B。通过将 ID 作为按钮本身的数据属性，您可以使代码更简单：

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

然后你可以删除

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

并简单地替换为

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

参考 $(this).parent.parent.children('td').attr('key')

Reference $(this).parent.parent.children('td').attr('key')

jquery

children

object

parent