使用jQuery从表中选择行

Question

I have a HTML table as outlined below (with sample data):

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

What I am trying to achieve is when a user selects a row a pop-up/dialog box appears showing details of the history.

Answer 1

With a little jQuery

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

And some CSS...

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

You can accomplish your requirement

Try this jsFiddle

Answer 2

Try this

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

Edit:- Based on your comment, you dont need to put onClick in all trs. you can use Jquery selectors to assign click event to all your trs

With your showDialog method you can do this and inside showDIalog , this will be the clicked tr .

$('tr', 'table.tbl tbody').click(showDialog);

Answer 3

If you construct the table using, for example, a tag like p or something else to identify a column that's a key on your context

    <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><p>00215</p></td>
        </tr>
        <tr>
        <td>15/02/2012 14:37</td>
        <td>Edit</td>
        <td>Out of stock</td>
        <td><p>85487</p></td>
        </tr>
        <tr>
        <td>14/03/2013 10:18</td>
        <td>Add</td>
        <td>Out of date</td>
        <td><p>15748</p></td>
        </tr>              
    </tbody>
    </table>
    <p>Picked row:</p>
    <p id="linea"></p>
    <p>The key for the row picked (StaffID) was:</p>
    <p id="StaffID"></p>

You can extract the key of the choosen row also using this script:

$(document).ready(function(){
    $('table tbody tr').click(function(){
        $("#linea").text($(this).text())
        $("#StaffID").text($(this).children('td').children('p').text())
    });
});

Answer 4

The below code will show the details as mentioned in the question.

<script>
    $(document).ready(function () {
      $('.tbl tbody tr').click(function () {
        var details = '';
        details += 'Change Date : ' + $(this).find('td:first-child').html() + '\n';
        details += 'Change Type : ' + $(this).find('td:nth-child(2)').html() + '\n';
        details += 'Description : ' + $(this).find('td:nth-child(3)').html() + '\n';
        details += 'StaffID : ' + $(this).find('td:nth-child(4)').html() + '\n';
            alert(details);
      });
    });
  </script>