CODEWITHSUNDEEP
javascriptjquery
Aaron
Aaron

Reputation: 11

Getting the row information on click with JQuery

So I'm trying to get the data in my table row on click and create/update another table with the clicked information. The problem is I'm not sure how to pass the data. As of right now I can click on the table rows and get the events started and It looks like my second table is created as well but the information is not passed properly.

I appreciate it if someone can help me by telling me how I'm supposed to pass the information

$(document).on("click", "tr", function(HTMLTableRowElement){ // watch the whole document for when existing (or new) tr elements are clicked
    //console.log("table row clicked!");
    let tbody = $("#employee-Details tbody");



        let fullNameTd= $('<tr>').text(HTMLTableRowElement.FirstName+' '+HTMLTableRowElement.LastName);


        let hireDate= $('<tr>').text( moment((HTMLTableRowElement.HireDate)).format('MM/DD/YYYY'));
        let fullAddress= $('<tr>').text(HTMLTableRowElement.AddressStreet+' '+HTMLTableRowElement.AddressCity+' '+HTMLTableRowElement.AddressState+' '+HTMLTableRowElement.AddressZip);
        let salaryBonus = $('<tr>').text(' $ '+HTMLTableRowElement.SalaryBonus);

        // append all table cells to a new row
        let row = $('<tr>').append(fullNameTd).append(hireDate).append(fullAddress).append(salaryBonus); // create the row and append                                                                            // all of the tr elements.
        // replace the row on the table body
        tbody.replaceWith(row);

Upvotes: 0

Views: 123

Answers (1)

gkatai
gkatai

Reputation: 436

In the click callback function you can pass in the event object. You are passing in HTMLTableRowElement and using it as a row element, which is incorrect. You can access the clicked row with $(this)[0], and inside the row you can access the individual cells.

Check out this plunker: link

For example to get the first and last name you need to get the first and second cell's text:

let fullNameTd = $('<tr>').text(thisRow.cells[0].innerText + ' ' + thisRow.cells[1].innerText);

Also the tbody.replaceWith(row); line will only work for the first time, because you are replacing the tbody with a row, so jquery will not find it for the second time. It's better to clear the tbody, and then append the row:

tbody.empty();
tbody.append(row);

Upvotes: 1

Related Questions