通過點擊獲取表格行數據

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> 

當我運行該項目，我會得到這樣的事情：

如果列客戶名稱的用戶點擊：BBB。它會彈出一個窗口並說：嗨，您已選擇客戶端ID：002，客戶端名稱：BBB，客戶端添加：xxxxx。

用戶可以點擊所有列，它仍然會在彈出窗口中返回整行數據。

如何做到這一點？請幫忙。

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

你可以這樣做：

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

    console.log(tableData); 
}); 

返回數據的一個很好的陣列，則可以顯示它你想要的。

演示：http://jsfiddle.net/Sc5N7/