jQuery - 将表附加到 tr 表

Question

我在 java 中有这两个对象：

Person.java

public class Person {
    String name;
    String surname;
    List<PersonDetails> details;

    //Constructor and getter-setter methods
    ...
}

PersonDetails.java

public class PersonDetails {
    int age;
    String city;

    //Constructor and getter-setter methods
    ...
}

我创建了一个 Person 对象列表并将其放入会话中。

前端我创建了一个显示列表的表格：

<table id="myTable">
<thead>
    <tr>        
        <th>Detail</th> <!-- this is a button -->
        <th>Name</th>
        <th>Surname</th>
    </tr>
</thead>
<tbody>
    <tr th:each=" p : ${listPerson}">
        <td></td>
        <td>${p.name}</td>
        <td>${p.surname}</td>                                                           
    </tr>
</tbody>

如您所见，表中的每个 p 都没有详细信息列表的痕迹。因为，我希望，当我单击详细信息按钮时，会在该行 (p) 中附加一个包含详细信息列表的新表。

像这样：

_{（来源：falafel.com）}

我不是要求你生成代码，我是在询问一些想法来做到这一点。这种情况有什么插件吗？

Answer 1

这是一个 div 不是一个 tr。

让我试着画一下：

Answer 2

如果您想使用表格执行此操作，您应该使用以下方法：

您应该为每条记录生成 2 行，其中一行包含数据，另一行包含详细信息。

为了简单起见，第二行可以有一个“父”表大小的colspan，其中的内容应该包含在<div>中。

当您单击相应的箭头时，应显示右下方的行。 在这个fiddle 中有一个如何做到这一点的例子。

Answer 3

为了追加一个新的table，您可能必须插入一个全新的行，其中td 跨越前面的row 的列。不过，对于使用屏幕阅读器的人来说，这样做可能不是最好的解决方案。您可能会使用大量屏幕外文本和 ARIA 将嵌套详细信息表中的数据与每个人相关联。

如何在对话框/模式中打开详细信息而不是附加新的table？在对话框/模式中打开详细信息会更好地进行键盘导航并将详细信息与每个人相关联。

我认为最好将所有顶级数据保存在一个table 中。这就是表格的用途——表格数据。出于显示目的分解数据会分离数据，这对于可访问性也不是很好。在单独的table 对话框/模式中打开详细信息可保持数据和 HTML 结构简单。