Pobierz dane wiersza tabeli jednym kliknięciem

Question

Mam tabelę i chciałem pozwolić użytkownikowi na kliknięcie dowolnego elementu na stole, aby uzyskać wiersz danych. Jak mogę to zrobić?

Na przykład, mam taki widok w moim widoku.

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

Kiedy uruchomić projekt Wezmę coś takiego:

Jeżeli użytkownik kliknie na nazwę kolumny Client: BBB. Zostanie wyświetlone okno wyskakujące z napisem: Witaj, wybrałeś Identyfikator klienta: 002, Nazwa klienta: BBB, Dodaj klienta: xxxxx.

Użytkownik może kliknąć na wszystkich kolumnach i nadal będzie zwracał cały wiersz danych w oknie wyskakującym.

Jak to zrobić? Proszę pomóż.

HTML: @model IEnumerable @ { ViewBag.Title = "Klient"; 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

Można to zrobić:

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

    console.log(tableData); 
}); 

Zwraca piękny wachlarz swoich danych, a następnie można wyświetlić go jak chcesz.

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