Lấy dữ liệu hàng của bảng bằng một cú nhấp chuột

Question

Tôi có một bảng và tôi muốn cho phép người dùng nhấp vào bất kỳ phần tử nào trên bảng để nhận hàng dữ liệu. Làm thế nào để làm điều đó?

Ví dụ: tôi có một bảng như thế này trong chế độ xem của mình.

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

Khi tôi chạy dự án, tôi sẽ có được một cái gì đó như thế này:

Nếu người dùng nhấp chuột vào Tên cột Chủ đầu tư: BBB. Nó sẽ có một cửa sổ bật ra nói rằng: Xin chào, bạn đã chọn ID ứng dụng khách: 002, Tên ứng dụng khách: BBB, Ứng dụng khách Thêm: xxxxx.

Người dùng có thể nhấp vào tất cả các cột và nó sẽ vẫn trả lại toàn bộ hàng dữ liệu trong cửa sổ bật ra.

Cách thực hiện việc này? Hãy giúp tôi.

HTML: @model IEnumerable @ { ViewBag.Title = "Client"; Bố cục = "~/Lượt xem/Chia sẻ/_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

Bạn có thể làm điều này:

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

    console.log(tableData); 
}); 

Trả về một mảng đẹp của dữ liệu của bạn, sau đó bạn có thể hiển thị nó như thế nào mà bạn muốn.

Bản trình diễn: http://jsfiddle.net/Sc5N7/