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. ``` : ``` When I run the project I'll get something like this: 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"; } ```

Client ID	Client Name	Client Address

Client Name	Client Code	Client Address

Accepted Answer

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/

Get the table row data with a click

Solution

Problem

Related problems