Manipulating <td>'s within different <tr>'s

Question

I'm wondering if the following can be done.

I have a list of 'expenses' that I'm displaying in a table. 4 columns - amount, date, where, and what.

I was thinking I'd like to make each clickable via jQuery which would expand that particular expense, inline, to show a more detailed description.

What I'm trying to do is, on click, replace the contents of the 'tr' with a single 'td' that would contain the extended info. Problem is that 'td' only expands to about a quarter of the table. Is there any way of making it extend to the whole row, while maintaining the widths of the other 'td's in the other rows?

Answer 1

Here's what I would do. Working Demo .

<table id="expenses">
<thead>
  <tr>
    <td>Amount</td>
    <td>Date</td>
    <td>Where</td>
    <td>What</td>
  </tr>
</thead>
<tbody>
  <tr class='expense' id='expense-1'>
    <td>$5.99</td>
    <td>4/2/2009</td>
    <td>Taco Bell</td>
    <td>Chalupa</td>
  </tr>
  <tr class='details' id='details-1'>
    <td colspan='4'>
    It was yummy and delicious
    </td>
  </tr>
  <tr class='expense' id='expense-2'>
    <td>$4.99</td>
    <td>4/3/2009</td>
    <td>Burger King</td>
    <td>Whopper</td>
  </tr>
  <tr class='details' id='details-2'>
    <td colspan='4'>
    The king of burgers, indeed!
    </td>
  </tr>
  <tr class='expense' id='expense-3'>
    <td>$25.99</td>
    <td>4/6/2009</td>
    <td>Olive Garden</td>
    <td>Chicken Alfredo</td>
  </tr>
  <tr class='details' id='details-3'>
    <td colspan='4'>
    I love me some italian food!
    </td>
  </tr>
</tbody>
</table>

With styles like these:

#expenses tr.expense {
    cursor: pointer;
}
#expenses tr.details {
    display: none;
}

And then have Javascript that looks like this:

$(function() {
    $('tr.expense', '#expenses').click(function() {
        var id = $(this).attr('id').split('-').pop();
        var details = $('#details-'+id);
        if(details.is(':visible')) {
            details.hide();
        } else {
            details.show();
        }
    });
});

That should do it.

Answer 2

<td colspan="4"> ?