Ottieni i dati della riga della tabella con un clic

Question

Ho una tabella e volevo consentire all'utente di fare clic su qualsiasi elemento della tabella per ottenere la riga di dati. Come lo faccio?

Ad esempio, ho una tabella come questa a mio avviso.

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

Quando eseguo il progetto Prendo qualcosa di simile:

Se l'utente clicca sul nome della colonna Cliente: BBB. Avrà una finestra pop out che dice: Ciao, hai selezionato Client ID: 002, Nome cliente: BBB, Client Aggiungi: xxxxx.

L'utente può fare clic su tutte le colonne e restituirà comunque l'intera riga di dati nella finestra di pop-out.

Come fare questo? Per favore aiuto.

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> 

Answer 1

Si può fare questo:

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

    console.log(tableData); 
}); 

Restituisce una bella serie di dati, quindi è possibile visualizzare come si desidera.

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