jquery - 使用 CSS jQuery 嵌套组表行

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 或数组创建这个表。请告诉我这是否是正确的方法以及如何从对象/数组生成此表。

Answer 1

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

这将允许您为 <tr> 设置不同的宽度元素 .. 为其中的任何元素设置动画(听起来像是你在说谎，你需要一个 javascript/jquery 解决方案

我在这里设置了一个 fiddle 来演示:http://jsfiddle.net/wdwogvon/

这与您要实现的目标相似吗？