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）。

像这样：

我不是要求你制作代码，我要求一些想法来做到这一点。这个案子有插件吗？

Answer 1

这是一个div而不是tr。

让我试着画：

Answer 2

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

如何在对话框/模态中打开详细信息而不是添加新的table？在对话框/模态中打开细节对于键盘导航和将细节与每个人相关联会更好。

我认为将所有顶级数据保存在一个table中会更好。这是表格应该用于表格数据的内容。为了显示目的而分解数据会分离数据，这对于可访问性来说也不是很好。在单独的table对话框/模态中打开详细信息可以使数据和HTML结构保持简单。

Answer 3

如果您想使用表格执行此操作，这是您应该使用的方法：

Structure

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

为了简单起见，第二行可以是＆＃34; parent＆＃34;的大小User-Agent。表格及其中的内容应包含在colspan。

中

单击相应的箭头时，应显示右下方的行。在这个fiddle中有一个如何执行此操作的示例。

jQuery - 将表附加到tr表

3 个答案: