Question

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

我有一张'费用'列表，我正在表格中显示。 4列 - 金额，日期，地点和内容。

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

我要做的是，点击后，用一个包含扩展信息的'td'替换'tr'的内容。问题是'td'只扩展到表的四分之一左右。有没有办法让它延伸到整行，同时保持其他行中其他'td的宽度？

Answer 1

这就是我要做的。 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>

使用以下样式：

#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"> ?

操纵不同的

2 个答案: