Javascript 操纵<；td>'；s在不同的范围内<；tr>'；s

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

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

我在想，我想通过jQuery使每一项都可以点击，这将扩展特定的费用，内联，以显示更详细的描述

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

？
<td colspan="4"> ?

以下是我要做的

然后使用如下所示的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();
        }
    });
});

---

应该可以了。

您能发布一个示例表和您的代码，但这些代码不太有效吗？

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

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