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 Object的列表並將其放入會話中。

前端側我創造，我顯示列表的表：

<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

如果你想做到這一點使用表，這是這種方法，你應該使用：你應該產生2行對於每條記錄，一個包含數據和包含的細節等

。

爲了簡單起見，第二行可以是「父」表大小的colspan，並且其中的內容應該包含在<div>中。

當你點擊各自的箭頭時，應該顯示右邊的波紋管。 在這個fiddle有一個如何做到這一點的例子。