Манипулирование <td>в различных <tr>

Question

Мне интересно, можно ли сделать следующее.

У меня есть список «расходов», которые я отображаю в таблице. 4 столбца - сумма, дата, где и что.

Я подумал, что хотел бы сделать каждый кликабельный с помощью jQuery, который увеличит этот конкретный расход, чтобы показать более подробное описание.

Что я пытаюсь сделать, так это щелкнуть, заменить содержимое «tr» одним «td», которое будет содержать расширенную информацию. Проблема в том, что «тд» расширяется только до четверти таблицы. Есть ли способ сделать так, чтобы он распространялся на всю строку, сохраняя при этом ширину других 'td' в других строках?

Answer 1

Вот что я бы сделал. Рабочая демоверсия .

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

С такими стилями:

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

И затем есть Javascript, который выглядит следующим образом:

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

Это должно сделать это.

Answer 2

<td colspan="4"> ?