Question

I am creating tables on button click and that works great. I then have have a hotkey to add extra rows to those tables. I need to get the parent id of the table where the cursor is but it keeps giving me undefined. I can get the parent div id ok but when I put table in it gives me undefined. Any help would be appreciated

$(document).ready(function() {
    $("#divNarrative1").keypress(function(e){    
        alert(e.target.id);
        var msgId = $( this ).closest( 'table' ).attr( 'id' );
        alert(msgId);
    });

});

Answer 1

I believe the table is inside divNarrative1. In the keypress this will point to divNarrative1 and calling closest on it will not give you the required table. You should use e.target instead of this.

$(document).ready(function() {
    $("#divNarrative1").keypress(function(e){    
        alert(e.target.id);
        var msgId = $(e.target).closest('table').attr('id');
        alert(msgId);
    });

});

Update: By OP

Heres the js that creates the table

     // Insert HTML table 
function InsertTable() {
     var div = document.getElementById('divNarrative1'); // table reference 

    div.focus();

    document.getElementById("hfProjectBoxNumber").value = Number(document.getElementById("hfProjectBoxNumber").value)+ 1;
    document.getElementById("hfBillTextNumber").value = Number(document.getElementById("hfBillTextNumber").value)+ 1;

    var projdiv = "Projectbox" + document.getElementById("hfProjectBoxNumber").value

     //create table
     var tbl = document.createElement('table');
     tbl.id = projdiv;
     tbl.width = "570px";
     tbl.setAttribute("table-layout", "fixed");
     tbl.setAttribute("border", "1");
     tbl.setAttribute("height", "50px");
     tbl.border = 1;

     //create header row
     var oRow = tbl.insertRow(-1);
     var oCell = oRow.insertCell(-1);
     oCell.width = "570px";
     oCell.setAttribute("colspan", "2");
     oCell.setAttribute("align", "center");
     oCell.innerHTML = projdiv;

     //create coumns
     var oRow = tbl.insertRow(-1);
     var oCell = oRow.insertCell(-1);
     oCell.width = "430px";
     oCell.innerHTML = "DESCRIPTION";
     oCell.setAttribute("align", "center");

     var oCell2 = oRow.insertCell(-1);
     oCell2.width = "140px";
     oCell2.innerHTML = "AMOUNT";
     oCell.setAttribute("align", "center");
     div.appendChild(tbl);
     return false;
 }

Heres the html on the page

    </div>
        <asp:Button ID="btnEditNarr" runat="server" Text="Edit Narrative" />
        <input type="button" value="Clear all Content" onclick="clearBilltextbox();"/>
        <input type="button" value="Save Content" onclick="getallcontent();"/>

</asp:Panel>