使用jQuery从表中选择行

Question

我有一个HTML表格,如下所示(带有示例数据):

<table class="tbl">
  <caption>Version History Table</caption>

  <thead>   
    <tr>
      <th>Change Date</th>
      <th>Change Type</th>
      <th>Description</th>
      <th>StaffID</th>
    </tr>   
  </thead>

  <tbody>
    <tr>
      <td>16/04/2010 07:30</td>
      <td>Edit</td>
      <td>New role</td>
      <td>00215</td>
    </tr>
    <tr>
      <td>15/02/2012 14:37</td>
      <td>Edit</td>
      <td>Out of stock</td>
      <td>85487</td>
    </tr>
    <tr>
      <td>14/03/2013 10:18</td>
      <td>Add</td>
      <td>Out of date</td>
      <td>15748</td>
    </tr>              
  </tbody>

</table>

我想要实现的是当用户选择一行时,会出现一个弹出/对话框,显示历史记录的详细信息.

Answer 1

用一点点jQuery

$(document).ready(function(){
    $('table tbody tr').click(function(){
        alert($(this).text());
    });
});

还有一些CSS ......

table tbody tr:hover {
    background-color: orange;
    cursor: pointer;
}

您可以完成您的要求

试试这个jsFiddle