how do i create html table like on the picture

Question

i have a 3 table and im doing inner join in the output below

how can i achive something like this

so far i already have code for expanding the row. the real problem here is how do i get all the signatoryname for each tracknum. im using php and html

this is my code

                    <table  class="table table-bordered ">
                    <thead>
                      <tr>
                    <th>Track Number</th>
                    <th>Document Title</th>
                    <th>Document Type</th>
                    <th>Date Filled</th>
                    <th> </th>
                      </tr>
                    </thead>
                <?php while ($r = $q->fetch()): ?>
                        <tr>
                            <td><?php echo $r['tracknum'] ?></td>
                            <td><?php echo $r['doctitle'] ?></td>
                            <td><?php echo $r['doctype'] ?></td>
                            <td><?php echo $r['datefilled'] ?></td>
                             <td>
                             <a href="#"><span class="btnshow glyphicon glyphicon-plus-sign"></span></a>

                             </td>

                        </tr>
                        <tr><td colspan="5"><p><?php echo $r['signatoryname'] ?></p>
                        </td></tr>
                <?php endwhile; ?>

                </table> 

for the table to expand

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
    $("td[colspan=5]").find("p").hide();
    $("table").click(function(event) {
        event.stopPropagation();
        var $target = $(event.target);
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.slideUp();
        } else {
            $target.closest("tr").next().find("p").slideToggle();
        }                    
    });
});
});//]]> 

</script>

this is the output of the code

i need to group the data below by tracknum but i need the signatoryname i want the html row to be expandable and list the signatoryname of that tracknum bellow it. thanks.

update: so far this is my code

UPDATE: below is the correct code:

<?php
                require_once 'dbconfig.php';
                try {
                    $conn = new PDO("mysql:host=$host;dbname=$dbname",
                            $username, $password);
                    // execute the stored procedure
                    $sql = 'CALL sp_trasactionsignatory()';
                    $q = $conn->query($sql);
                    $q->setFetchMode(PDO::FETCH_ASSOC);
                } catch (PDOException $pe) {
                    die("Error occurred:" . $pe->getMessage());
                }
                ?>                  
                <table  class="table table-bordered ">
                    <thead>
                      <tr>
                    <th>Track Number</th>
                    <th>Document Title</th>
                    <th>Document Type</th>
                    <th>Date Filled</th>
                    <th> </th>
                      </tr>
                    </thead>
                <?php while ($r = $q->fetch()): ?>
                        <tr>
                            <td><?php echo $r['tracknum'] ?></td>
                            <td><?php echo $r['doctitle'] ?></td>
                            <td><?php echo $r['doctype'] ?></td>
                            <td><?php echo $r['datefilled'] ?></td>
                             <td>
                             <a href="#"><span class="btnshow glyphicon glyphicon-plus-sign"></span></a>

                             </td>

                        </tr>
                        <tr><td colspan="5">


                        <?php 


                        require_once 'dbconfig.php';
                        try {

                        $conn = new PDO("mysql:host=$host;dbname=$dbname",
                            $username, $password);

                        $_tempp1 = $r['tracknum'];
                        $stmt = $conn->prepare("CALL sp_gettransactsignatory(?)");
                        $stmt->bindParam(1, $_tempp1, PDO::PARAM_STR, 30); 
                        $stmt->execute();
                        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
                            echo "<p>" . $row['signatoryname'] . "</p>";
                        }

                        } catch (PDOException $pe) {
                    die("Error occurred:" . $pe->getMessage());
                }

                        ?>


                        </td></tr>
                <?php endwhile; ?>

                </table> 

Answer 1

Problem:

How do I get all the signatoryname for each tracknum?

Solution:

Your very first initial query would be like this,

(Since you didn't provide the table name, change the table name from the below queries)

$q = $connection->query("SELECT tracknum, doctitle, doctype, datefilled FROM tablename GROUP BY tracknum"); 

Then comes to your table,

<table  class="table table-bordered ">
<thead>
<tr>
    <th>Track Number</th>
    <th>Document Title</th>
    <th>Document Type</th>
    <th>Date Filled</th>
    <th> </th>
</tr>
</thead>
<?php while ($r = $q->fetch_assoc()): ?>
    <tr>
        <td><?php echo $r['tracknum']; ?></td>
        <td><?php echo $r['doctitle'] ?></td>
        <td><?php echo $r['doctype'] ?></td>
        <td><?php echo $r['datefilled'] ?></td>
         <td>
         <a href="#"><span class="btnshow glyphicon glyphicon-plus-sign"></span></a>
         </td>

    </tr>
    <tr><td colspan="5">    
    <?php
        $result_set = $connection->query("SELECT signatoryname FROM tablename WHERE tracknum = {$r['tracknum']}");
        while ($row = $result_set->fetch_assoc()){
            echo "<p>" . $row['signatoryname'] . "</p>";
        }
    ?>
    </td></tr>
<?php endwhile; ?>

</table>

Don't forget to change the tablename in both the queries.

Edited:

If you using PDO extensions to execute your queries then you can do something like this,

<?php
    $_tempp1 = $r['tracknum'];
    $stmt = $connection->prepare("SELECT signatoryname FROM tablename WHERE tracknum = :tracknum");
    $stmt->bindParam(':tracknum', $_tempp1, PDO::PARAM_STR, 30); 
    $stmt->execute();

    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        echo "<p>" . $row['signatoryname'] . "</p>";
    }
?>