Question

我有一个表格，其中包含与每行相关的数据。

e.g。

Column 1      | Column 2
Data            More Data
  Data part a     More Data part a
  Data part b     More Data part b

我需要在每行之间显示这些数据，具体取决于用户选择的内容。

这个jsfiddle展示了我需要的东西：http://jsfiddle.net/clairesuzy/N8Y6c/

所以我的问题是，正确的方法是什么？上面的jsfiddle做了我需要的，但有点像黑客。必须有更好的方法在表行之间显示数据吗？

Answer 1

为内容添加行，并将内容div放在这些行中。然后只需在none和表格行之间切换这些行的显示。
例如：css

.content {
    background-color: #cccccc;
}
.content.collapse {
    display: none;
}

HTML

<tr>
    <td><input type="button" data-href="#content1" ></td>
    <td>Ernst Handel</td><td>10258</td><td>07/17/1996</td><td>$403.72</td>
</tr>
<tr class="content collapse" id="content1">
    <td colspan="5">
        <div>Content 1</div>
    </td>
</tr>
<tr>
    <td><input type="button" data-href="#content2"></td>
    <td>Wartian Herkku</td><td>10270</td><td>08/01/1996</td><td>$1,376.00</td>
</tr>
<tr class="content collapse" id="content2">
    <td colspan="5">
        <div>Content 2</div>
    </td>
</tr>

JS

$(document).ready(function() {

    $("input").click(function() {
        var contentId =this.dataset.href;
        $(contentId).toggleClass("collapse");
    });

});

这是DEMO

Answer 2

根据@Teemu，@ A.O和@guest的评论。

Sample fiddle.

还可以通过以下方式查看验证：

HTML：http://validator.w3.org/ example
CSS：http://jigsaw.w3.org/css-validator/

快速概念：

<table>
    <tr>
        <td>Cell1</td>
        <td>Cell2</td>
        <td>Cell3</td>
        <td>Cell4</td>
        <td>Cell5</td>
    <tr>
    <tr>
        <td colspan="5" id="content1">
            <div>
               Toggle able content
            </div>
        </td>
    </tr>
</table>

CSS：

[id*=content] {
    background: #eee;
    display: none;
}

JS：

$("input").click(function () {
    var $el = $($(this).data('href'));
    if ($el.is(":visible")) {
        $el.hide();
    } else {
        $el.show();
    }
});

如何在表行之间显示元素？

2 个答案: