Get the table row data with a click

Question

I have a table and I wanted to allow user to click on any elements on the table to get the row of data. How do I do that?

For example, I have a table like this in my view.

      <table class="myTable">
      :     <tr class="table">
                <th class="table">
                    Client ID
                </th>
                <th class="table">
                    Client Name
                </th>
                <th class="table">
                    Client Address
                </th>
            </tr>

When I run the project I'll get something like this:

enter image description here

If user click on column Client Name: BBB. It will have a pop out window saying: Hi, you've selected Client ID: 002, Client Name: BBB, Client Add: xxxxx.

User can click on all columns and it will still return the whole row of data in the pop out window.

How to do this? Please help.

HTML: @model IEnumerable @{ ViewBag.Title = "Client"; Layout = "~/Views/Shared/_Layout.cshtml"; }

<div class="body">

<div class="outer">
    <div class="inner">
        <table class="myTable">
            <tr class="table">
                <th class="table">
                    Client Name
                </th>
                <th class="table">
                    Client Code
                </th>
                <th class="table">
                    Client Address
                </th>
                <th class="searchTable">
                    Client Lead Partner
                </th>
            </tr>
            @foreach (var i in Model)
            {
                <tr class="myTable">
                    <td class="table">@i.ClientName
                    </td>
                    <td class="table">@i.ClientCode
                    </td>
                    <td class="table">@i.ClientAddress
                    </td>
                </tr>
            }
        </table>
    </div>
</div>

It has nothing to do with `asp.net-mvc-4` tag. Go for Jquery or javascript. — Bhushan Firake, Jun 28 '13 at 02:59
Is there any additional data you'd like to return besides that in the table row, ie. will you need to retrieve additional data from the server? — monkeyhouse, Jun 28 '13 at 03:06
there are two cases. first case is just return the data in the table row and the second case is to compare and retrieve additional data from the server. — sniggy, Jun 28 '13 at 03:08

tymeJV · Accepted Answer · 2013-06-28T03:32:05.137

12

You can do this:

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

    console.log(tableData);
});

Returns a nice array of your data, then you can display it how you want.

Demo: http://jsfiddle.net/Sc5N7/

edited Jun 28 '13 at 03:32

answered Jun 28 '13 at 03:11

tymeJV

103,943
14
161
157

1

@sniggy Added a demo with a pop-up – tymeJV Jun 28 '13 at 03:18
i cant get it working. maybe it has something to do with my @foreach? as i have table and i'm taking data with @foreach method. – sniggy Jun 28 '13 at 03:27
Post the rendered HTML, I'll take a look at it. – tymeJV Jun 28 '13 at 03:28
@sniggy I've changed my selector in the answer, give it a try – tymeJV Jun 28 '13 at 03:37
Will the same apply to my question here: http://stackoverflow.com/questions/26004056/how-to-retrieve-the-tr-data-on-the-same-row-within-gridview-using-jquery-modal-w – SearchForKnowledge Sep 23 '14 at 20:32
Mine is a LinkButton inside a TD within a TR and I would like to display the last column in the GridView respective to that TR. – SearchForKnowledge Sep 23 '14 at 20:38

Get the table row data with a click

1 Answers1

Linked