可點擊的jQuery tablesorter

Question

我在JS和jQuery的nooby和我的問題可能是愚蠢的。我在我的項目中使用jQuery tablesorter，我試圖使錶行成爲可編輯的，這樣當你點擊一行時，就能夠獲得選定的行ID。例如，我有這樣的表格：

No | Name | Address 
1 | Jon | USA 
2 | Michael | USA 

所以當我點擊第二行時，我想獲得No值。任何用於這種實現的信息源都將是有用的。

Answer 1

你並不需要對HTML進行任何更改。

此方法使用delegated event binding，所以即使您添加或刪除任何表中的行，它仍然會工作 - demo

$(function() { 

    $('table') 
     .on('click', 'tbody tr', function(){ 
      // closest finds the row, .eq(0) finds the first cell 
      var id = $(this).closest('tr').children().eq(0).text(); 
      alert(id); 
     }) 
     .tablesorter({ 
      theme: 'blue' 
     }); 

}); 

Answer 2

取決於你的HTML，但讓我們說，你有這樣的：

<table id="mytable"> 
<tr> 
    <th> 
     No 
    </th> 
    <th> 
     Name 
    </th> 
     <th> 
     Address 
    </th> 
</tr> 
<tr data-id="1"> 
    <td> 
     1 
    </td> 
    <td> 
     Jon 
    </td> 
    <td> 
     USA 
    </td> 
</tr> 
</table> 

你可以使用：

$("#mytable tr") 
    .on("click", function(){ 
     var myId = $(this).attr("data-id"); 
     // do something 
    }); 

Answer 3

您可以使用您在正常使用DOM一切。

我已經在這裏創造一個測試小提琴 - http://jsfiddle.net/picklespy/oz31pj0n/

HTML

分配class的行和一類到No列。當有人點擊該行時，此示例將提醒No列中的值。

<table cellspacing="1" cellpadding="0" border="0" class="tablesorter"> 
     <thead> 
      <tr> 
       <th>No</th> 
       <th class="header headerSortDown">Name</th> 
       <th class="header">Address</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class="row"> 
       <td class="id">1</td> 
       <td>Jon</td> 
       <td>USA</td> 
      </tr> 
      <tr class="row"> 
       <td class="id">2</td> 
       <td>Michael</td> 
       <td>USA</td> 
      </tr> 
    </tbody> 
</table> 

JS

$(document).ready(function() { 
    $('tr.row').click(function() { 
     alert($(this).find('td.id').text()) 
    }); 
});