jQuery - append a table to a tr table

Question

I have in java this two objects:

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

I create a list of Person Object and I put it into the session.

Front-end side I create a table where I display the list:

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

Like you can see there is no trace of the details list for each p in the table. Because, I would that, when I click on the detail button, a new table containing details list was appended to that row (p).

Like this:

_{(source: falafel.com)}

I'm not asking you to produce the code, I'm asking some ideas to do this. There is any plugin for this case?

score 0 · Answer 1 · answered Dec 30 '15 at 13:42

0

It is a div not a tr.

Let me try to draw:

answered Dec 30 '15 at 13:42

Samuel Fajreldines

78
10

Matt · Answer 2 · 2015-12-30T14:07:19.137

In order to append a new table you might have to insert a whole new row with a td spanning the preceding row's columns. Doing this might not be the greatest solution for someone using a screenreader, though. You'd probably have use a lot of offscreen text and ARIA to associate the data in the nested details table to each person.

How about opening the details in a dialog/modal instead of appending a new table? Opening the details in a dialog/modal would be better for keyboard navigation and associating the details to each person.

I think it's better to keep all of the top level data in one table. This is what tables should be used for—tabular data. Breaking up the data for display purposes disjoins the data, which is also not great for accessibility. Opening up the details in a separate table dialog/modal keeps the data and HTML structure simple.

I can't use the modal, because the client wants a new table for the details. — Dave, Dec 30 '15 at 13:59

score 0 · Answer 3 · answered Dec 30 '15 at 14:01

0

If you want to do this using tables, this is the approach you should use:

Structure

You should generate 2 rows for each record, one containing the data and other containing the details.

In order to make it simple, the second row could be have a colspan of the size of the "parent" table and the content inside it should be wrapped in a <div>.

When you click on the respective arrow, the row right bellow should be shown. In this fiddle there is an example of how to do this.

answered Dec 30 '15 at 14:01

Henrique Barcelos

7,670
1
41
66

How can I generate two row for each record? Currently I put the for each in the ``. – Dave Dec 30 '15 at 15:34
I don't know the first thing about JSP, but a quick search here on SO took me to [this anwser](http://stackoverflow.com/a/15839540/1798341). You have to iterate over the two lists (one with the "parent" record and the other with the "childs") an generate a row for each one. – Henrique Barcelos Dec 30 '15 at 16:19

jQuery - append a table to a tr table

3 Answers3