Search code examples
jqueryjquery-selectorssiblingsparents

jQuery how to target the data in these sibling td's?

So when modalLink is clicked I want to grab and save the data values from the other td's inside of this tr and not other tr's

<tr date-user-id="1NJD3A" data-user-details="{...}" class="">
    <td class="table-request-btn incoming-icon">
        <button class="modalLink" href="#modalrequest">Request Intro</button>
    </td>
    <td class="data-name request-row">
        Joe Blow
    </td>
    <td class="data-career request-row">
        Administrator
    </td>
    <td class="data-company request-row">
        Acme
    </td>
</tr>



My function so far which is throwing an unreable Uncaught TypeError

How would you approach this problem?

var wireSearchTable = function() {
    $('.modalLink').unbind('click').bind('click', function () {
        var request_name = $(this).parents('tr').siblings.data('name');
        var request_title = $(this).siblings.data('career');
        var request_company = $(this).siblings.data('company');
            requestIntroModal.wireRequestIntroModal(details);

            console.log('request_name = '+request_name);
            console.log('request_title = '+request_title);
            console.log('request_company = '+request_company);
        });
    };
Solution

  • I'd personally suggest:

    $('button.modalLink').click(function (e) {
    e.preventDefault();
    var row = $(this).closest('tr');

    // I have absolutely no idea what the following is meant to do,
    // if anything, therefore it's not in the linked demo,
    // and remains commented-out here.
    // requestIntroModal.wireRequestIntroModal(details);

    people = {
        'name': row.find('td.data-name').text(),
            'career': row.find('td.data-career').text(),
            'company': row.find('td.data-company').text()
    };
    console.log(people);
});

    JS Fiddle demo.

    References: