Referenz $ (this) .parent.parent.children ('td'). Attr ('Schlüssel')

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> 

In diesem Beispiel habe ich eine Tabelle eingerichtet, hat jede Zeile ein paar TD-Tags und die letzte TD in jeder Zeile hat eine Schaltfläche "Entfernen". Wenn ich darauf klicke, muss ich mir das übergeordnete TR ansehen und die Anzahl der TDs ermitteln, damit ich die for-Schleife einrichten kann. Überprüfen Sie dann während dieser for-Schleife alle TD-Tags für dasjenige, das die Schlüssel-ID hat.

Ich kann dies dann nehmen und es in meinem Endziel einer SQL-Anweisung, die diesen Datensatz aus einer Datenbanktabelle löschen wird. Daher brauche ich die Schlüssel-ID aus der Zeile, auf die ein Entfernen-Button geklickt wird.

Ich weiß nicht, wie man die TD-Kinder des Eltern-TRs definiert, wenn man ein Objekt im $ (e) -Format übergibt.

Irgendwelche Ideen?

UPDATE - Ausgabe komplett

Danke jeder konnte ich dies getan heute. Ich endete mit so etwas.

<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> 

Dies wird einen MySQL-Befehl zu senden, um DELETE FROM [Tablename] WHERE [key_name] = '[Key_Value]'

Answer 1

Beachten Sie, dass Ihre doppelte Element-IDs sind, ungültige HTML und:

Dann, wenn Sie nur die Zeile auf die Schaltfläche klicken entfernen möchten, können Sie Ihr Skript wie folgt reduziert werden Ihr Code wird niemals funktionieren, solange Sie sie haben, da der jQuery-Selektor immer nur das erste der duplizierten Elemente identifizieren kann. Besser, dies mit Klassen zu tun. In dem Ausschnitt unten habe ich die "ID" der Tds geändert, die es die tatsächliche ID (identisch mit dem Inhalt) haben, dann sind sie einzigartig und es ist einfacher, die ID abzurufen. Ich habe eine Warnung verwendet, um die abgerufene ID zu demonstrieren.

$(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.Sie könnten den Code noch einfacher machen, indem Sie die ID als Daten-Attribut der Schaltfläche selbst mit:

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

und dann könnte man

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

entfernen und ersetzen mit einfach

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

Answer 2

Sie sollten die ID als Eigenschaft setzen in der Taste verwendet werden.

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

Auf klicken uns so 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(); 
}); 

Sie können Sie auch das Daten- Attribut

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

Und holt die ID diese Abfrage

mit

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

Answer 3

Verwenden Sie zuerst Klassen anstelle von 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>