Generate Child Row Under a Parent Row in HTML Table

var tableData = {  "draw": 1,  "recordsTotal": 57,  "recordsFiltered": 57,  "data": [    {      "DT_RowId": "row_5",      "first_name": "Airi",      "last_name": "Satou",      "position": "Accountant",      "office": "Tokyo",      "start_date": "28th Nov 08",      "salary": "$162,700"    },    {      "DT_RowId": "row_25",      "first_name": "Angelica",      "last_name": "Ramos",      "position": "Chief Executive Officer (CEO)",      "office": "London",      "start_date": "9th Oct 09",      "salary": "$1,200,000"    },    {      "DT_RowId": "row_3",      "first_name": "Ashton",      "last_name": "Cox",      "position": "Junior Technical Author",      "office": "San Francisco",      "start_date": "12th Jan 09",      "salary": "$86,000"    },    {      "DT_RowId": "row_19",      "first_name": "Bradley",      "last_name": "Greer",      "position": "Software Engineer",      "office": "London",      "start_date": "13th Oct 12",      "salary": "$132,000"    },    {      "DT_RowId": "row_28",      "first_name": "Brenden",      "last_name": "Wagner",      "position": "Software Engineer",      "office": "San Francisco",      "start_date": "7th Jun 11",      "salary": "$206,850"    },    {      "DT_RowId": "row_6",      "first_name": "Brielle",      "last_name": "Williamson",      "position": "Integration Specialist",      "office": "New York",      "start_date": "2nd Dec 12",      "salary": "$372,000"    },    {      "DT_RowId": "row_43",      "first_name": "Bruno",      "last_name": "Nash",      "position": "Software Engineer",      "office": "London",      "start_date": "3rd May 11",      "salary": "$163,500"    },    {      "DT_RowId": "row_23",      "first_name": "Caesar",      "last_name": "Vance",      "position": "Pre-Sales Support",      "office": "New York",      "start_date": "12th Dec 11",      "salary": "$106,450"    },    {      "DT_RowId": "row_51",      "first_name": "Cara",      "last_name": "Stevens",      "position": "Sales Assistant",      "office": "New York",      "start_date": "6th Dec 11",      "salary": "$145,600"    },    {      "DT_RowId": "row_4",      "first_name": "Cedric",      "last_name": "Kelly",      "position": "Senior Javascript Developer",      "office": "Edinburgh",      "start_date": "29th Mar 12",      "salary": "$433,060"    }  ]}function format ( d ) {    return '<tr class="child"><td colspan="5">Full name: '+d.first_name+' '+d.last_name+'<br>'+        'Salary: '+d.salary+'<br>'+        'The child row can contain any data you wish, including links, images, inner tables etc.</td></tr>';} $(document).ready(function() {    var dt = $('#example').DataTable( {        "columns": [            {                "class":          "details-control",                "orderable":      false,                "data":           null,                "defaultContent": ""            },            { "data": "first_name" },            { "data": "last_name" },            { "data": "position" },            { "data": "office" }        ],        "order": [[1, 'asc']]    } ); dt.clear(); dt.rows.add(tableData.data); dt.draw();    // Array to track the ids of the details displayed rows    var detailRows = [];     $('#example tbody').on( 'click', 'tr td.details-control', function () {        var tr = $(this).closest('tr');        var row = dt.row( tr );        var idx = $.inArray( tr.attr('id'), detailRows );         if ( tr.hasClass('details') ) {            tr.removeClass( 'details' );            tr.prev('tr.child').remove();        }        else {            tr.addClass( 'details' );            tr.before(format( row.data())).show();        }    } );     // On each draw, loop over the `detailRows` array and show any child rows    dt.on( 'draw', function () {        $.each( detailRows, function ( i, id ) {            $('#'+id+' td.details-control').trigger( 'click' );        } );    } );} );

td.details-control {    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;    cursor: pointer;}tr.details td.details-control {    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;}

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"><script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script><table id="example" class="display" style="width:100%">        <thead>            <tr>                <th></th>                <th>First name</th>                <th>Last name</th>                <th>Position</th>                <th>Office</th>            </tr>        </thead>        <tfoot>            <tr>                <th></th>                <th>First name</th>                <th>Last name</th>                <th>Position</th>                <th>Office</th>            </tr>        </tfoot>    </table>

mysql - create a summary parent row and child rows from a table

You could enhance your original code a bit and use:

select `Match`, Score
from (
SELECT t1.Team, CONCAT(t1.Team," VS ",t2.Team) as 'Match', 
    concat(SUM(IF(t1.Winner=1,1,0)), '-',SUM(IF(t2.Winner=1,1,0)), ' "parent"') as 'Score', 1 as ord
FROM matches t1
INNER JOIN matches t2 ON t1.MatchID = t2.MatchID AND t1.Team <> t2.Team WHERE t1.team IS NOT NULL AND t2.team IS NOT NULL 
GROUP BY t1.Team, CONCAT(t1.Team," VS ",t2.Team)
UNION
SELECT t1.Team, CONCAT(t1.Player," / ",t2.Player), 
    concat(SUM(IF(t1.Winner=1,1,0)), '-',SUM(IF(t2.Winner=1,1,0)), ' "child"') as 'Score', 2
FROM matches t1
INNER JOIN matches t2 ON t1.MatchID = t2.MatchID AND t1.Team <> t2.Team WHERE t1.team IS NOT NULL AND t2.team IS NOT NULL 
GROUP BY t1.Team, CONCAT(t1.Player," / ",t2.Player)
) as q
ORDER BY Team, ord;

See dbfiddle

This kind of problem would be better to be solved in programming language though.

Related Topics