jQuery-将表追加到tr表

Question

我在Java中有两个对象：

人.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
    ...
}

我创建一个“人对象”列表，并将其放入会话中。

在前端，我创建一个显示列表的表：

<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

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

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

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

Answer 3

如果要使用表执行此操作，则应使用以下方法：

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

为了简单起见，第二行的colspan可以是“父”表的大小，并且表中的内容应该包装在<div> 。

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