How to return table row data on click of row td?

Question

I'm trying to return the row data as an array when I click a button on that table row. Searching on SO gave me this example using children.map.

But when I run the web app and click a the success button on any of the table rows, the array returned in the console is empty.

I've verified that each table row contains data so I'm not sure why no data is returned using the map function.

I also know that the function is firing on click of the buttons with class="btn-success".

Question:

How to return table row data on click of row td?

This is the gist of the table and the associated jQuery function to map the row data:

<table id="statusTable" class="table table-hover table-bordered results">
            <thead>
                <tr>
                    <th style="visibility:hidden;" >ID</th>
                    <th>IT Owner</th>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Update Record</th>


                </tr>
            </thead>
            <tbody>
            @foreach (var row in Model.ReleaseStatus)
            {
                    <tr>
                        <td style="visibility:hidden;" >@Html.Raw(row.ID)</td>
                        <td>@Html.Raw(row.Configuration)</td>
                        <td id="app_name" class="links" style="font-size: 14px;">@row.ID</td>
                        <td>@row.Configuration_Item</td>
                        <td>@row.Configuration_Name</td>
                        <td><button type="submit" class="btn btn-success btn-lg">Update</button></td>
                    </tr>
              }
            </tbody>

        </table>

JQuery function:

$(".btn-success").click(function () {
            var tableData = $(this).children("td").map(function () {
                return $(this).text();
            }).get();

            console.log(tableData);
        });

Your button has no `td` children... You probably want: `var btn = this; $(this).closest('tr').children().not(function(){return !$(this).find(btn).length;}).map(...)` — A. Wolff, Sep 23 '16 at 09:55
`$(this).children("td").map(function () {` change to `$(this).closest('tr').find("td").map(function () {` — guradio, Sep 23 '16 at 09:57

Mehdi Dehghani · Accepted Answer · 2017-02-10T05:47:58.877

You need to find tr, then tds

Updated

HTML

<table>
    <tr>
        <td>col #1</td>     
        <td>col #2</td>
        <td>            
            <button type="button">click me</button>
        </td>
    </tr>
</table>

JS

$("button").click(function() {
    var $td = $(this).closest('tr').children("td"),
        len = $td.length;       

    var tableData = $td.map(function(i) {   
        if(i < len -1)
            return $(this).text();
    }).get();

    console.log(tableData); // ["col #1", "col #2"]
});

jsfiddle

score 0 · Answer 2 · answered Sep 23 '16 at 09:58

0

$(this) is the button that has no children Change in $("#statusTable") that is the table

 $(".btn-success").click(function () {
        var tableData = $('#statusTable').children("td").map(function () {
            return $(this).text();
        }).get();

        console.log(tableData);
    });

answered Sep 23 '16 at 09:58

Draykos

773
7
16

This would not be a good idea. Look at what rows you're selecting vs the rows that should be selected (ie all vs the one being clicked). – freedomn-m Sep 23 '16 at 10:18

score 0 · Answer 3 · answered Sep 23 '16 at 10:05

0

You can also try each loop of td :

$(".btn-success").click(function () {
    var selector = this.parentElement.parentElement;
    var items = [];
    $(this.parentElement.parentElement.children).each(function(a,b){            
        items.push($(this).text());
    });
    console.log(items);
});

answered Sep 23 '16 at 10:05

Sandip - Frontend Developer

14,397
4
35
61

1

If you're using jquery, use jquery - don't mix+match with javascript node travseral. In this cases `.closest("tr")` is the best match as `.parent().parent()` makes the html too brittle. – freedomn-m Sep 23 '16 at 10:20

How to return table row data on click of row td?

3 Answers3