Search code examples
jqueryobjectparentchildren

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


<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 this example I have a table set up, each row has a few TD tags and the last TD in each row has a "Remove" button. When clicked I need it to look at the parent TR and get the amount of TDs so I can set up the for loop. Then during that for loop check all the TD tags for the one that has the Key ID.

I can then take this and plug it into my end goal of having an SQL statement that will delete that record from a database table. Hence why I need the Key ID from the row a remove button is clicked in.

I dont know how to referance the parent TR's TD children when passing jquery a object in the $(e) format.

Any one have any ideas?

UPDATE - Issue Complete

Thank you everyone I was able to get this done today. I ended up with something like this.

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

This will be used to send a mysql command to DELETE FROM [TableName] WHERE [Key_Name] = '[Key_Value]'


Solution

  • Note that your duplicate element IDs are invalid HTML, and your code will never work while you have them, since the jQuery selector can only ever identify the first of the duplicated elements. Better to do this using classes. In the snippet below I've changed the "id" of the tds that have it to be the actual ID (same as the content), then they're unique and it's easier to retrieve the ID. I've used an alert just to demonstrate the ID retrieved.

    $(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. You could make the code even simpler by having the ID as a data-attribute of the button itself:

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

    and then you could remove

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

    and replace it with simply

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