Получить данные строки таблицы с помощью щелчка

Question

У меня есть таблица, и я хотел разрешить пользователю щелкнуть по любым элементам таблицы, чтобы получить строку данных. Как мне это сделать?

Например, у меня есть таблица, подобная этой, на мой взгляд.

 <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> 

При запуске проекта я получить что-то вроде этого:

Если пользователь нажмет на колонке клиента Имя: ВВВ. У него появится всплывающее окно с сообщением: Привет, вы выбрали идентификатор клиента: 002, имя клиента: BBB, клиент: xxxxx.

Пользователь может щелкнуть по всем столбцам, и он все равно вернет всю строку данных во всплывающем окне.

Как это сделать? Пожалуйста помоги.

HTML: @model IEnumerable @ { ViewBag.Title = "Клиент"; 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> 

Answer 1

Вы можете сделать это:

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

    console.log(tableData); 
}); 

Возвращает хороший набор данных, то вы можете отобразить его, как вы хотите.

Демо: http://jsfiddle.net/Sc5N7/