Manipulation <td> dans différents <tr>

Question

Je me demande si ce qui suit peut être fait.

J'ai une liste de 'dépenses' que j'affiche dans un tableau. 4 colonnes - montant, date, où et quoi.

Je pensais que je voudrais faire chaque clickable via jQuery qui augmenterait cette dépense particulière, en ligne, pour montrer une description plus détaillée. Ce que j'essaye de faire est, sur le clic, remplacez le contenu du 'tr' par un simple 'td' qui contiendrait l'information étendue. Le problème est que 'td' ne s'étend qu'à environ un quart de la table. Y a-t-il un moyen de l'étendre à toute la rangée, tout en maintenant les largeurs des autres td dans les autres rangées?

Answer 1

<td colspan="4"> ? 

Answer 2

Voici ce que je ferais. 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> 

Avec des styles comme ceux-ci:

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

Et alors Javascript qui ressemble à ceci:

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

Cela devrait le faire.