在不同的<tr>中操纵<td>

Question

我想知道是否可以做到以下几点.

我有一个'费用'列表,我正在表格中显示.4列 - 数量,日期,地点和内容.

我以为我想通过jQuery进行每次点击,这可以扩展特定的费用,内联,以显示更详细的描述.

我想要做的是,点击后,用一个包含扩展信息的'td'替换'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();
        }
    });
});

应该这样做.