Question

我想制作多级表格，如：

+-----+-----+-------+------+---------+
| lv1 | lv2 | name  | date |    value|
+-----+-----+-------+------+---------+
| - lv1: 1                           |
|------------------------------------|
| -      lv2: 1                      |
|------------------------------------|
| 1    | 1  | John  |01/01 |    100.0|
+-----+-----+-------+------+---------+
| 1    | 1  | John  |01/01 |    100.0|
|------------------------------------|
| -      lv2: 2                      |
|------------------------------------|
| 1    | 2  | John  |01/01 |    100.0|
+-----+-----+-------+------+---------+
| + lv1: 2                           |
|------------------------------------|
| +      lv2: 1                      |
|------------------------------------|
| +      lv2: 2                      |
|------------------------------------|
| +      lv2: 3                      |
|------------------------------------|
| + lv1: 3                           |
|------------------------------------|
| + lv1: 4                           |
|------------------------------------|

这样的东西..我试过这样但我不知道这是不是正确的方法：

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>- Lv1:1</td>
        </tr>
        <tr>
            <td>   - Lv2:1</td>
        </tr>
        <tr>
            <th>1</th>
            <th>1</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <th>1</th>
            <th>1</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
         <tr>
            <td>     -Lv2:2</td>
        </tr>
        <tr>
            <th>1</th>
            <th>2</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td>+ Lv1:2</td>
        </tr>
        <tr>
            <td>   + Lv2:1</td>
        </tr>
         <tr>
            <td>   + Lv2:2</td>
        </tr>
        <tr>
            <td>   + Lv2:3</td>
        </tr>
        <tr>
            <td>+ Lv1:3</td>
        </tr>
        <tr>
            <td>+ Lv1:4</td>
        </tr>

    </tbody>
</table>

即使我可以使用jQuery进行折叠/展开。另外，我要提一下，我想从JSON或数组创建此表。请告诉我这是否正确，以及如何从object / array生成此表..

Answer 1

我认为你在这里寻找的是colspan

这将允许您为<tr>元素设置不同的宽度..虽然可以为这些元素设置动画（听起来像是你，你需要一个javascript / jquery解决方案

我在这里设置了一个小提琴来演示：http://jsfiddle.net/wdwogvon/

这与你想要完成的事情类似吗？

使用CSS jQuery嵌套的组表行

1 个答案: