CODEWITHSUNDEEP
jqueryhtmlhtml-table
Oam Psy
Oam Psy

Reputation: 8663

Using jQuery to select row from table

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.

Upvotes: 0

Views: 42163

Answers (4)

Zeeshan Eqbal
Zeeshan Eqbal

Reputation: 260

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

Snapshot attached

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

Upvotes: 0

Jorge Cribb
Jorge Cribb

Reputation: 406

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())
    });
});

Upvotes: 0

PSL
PSL

Reputation: 123739

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

Upvotes: 1

Agustin Meriles
Agustin Meriles

Reputation: 4854

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

Upvotes: 9

Related Questions