Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Haralds Cerins
Haralds Cerins
2,516 Points
Posted by Haralds Cerins
Haralds Cerins
2,516 Points

Onclick Insert rows and populate them with data from php array.

I have a table with order numbers and 2 other columns and when the order number is clicked I want to show more details about it. I want to insert rows under the triggered order number or right beside it with the details which consist of 3 columns and uncertain number of rows. Not sure how to pass php data to javascript.

<?php include("database.php"); addTable($cancelled,$orders); addTable($inProcess,$orders); addTable($recent,$orders); function addTable($status,$orders) { $id = $status[0]["status"]; echo "<table id='$id'>"; echo "<tr><th colspan='3'>"; if (!array_key_exists('19',$status)){ echo $status[0]["status"]; }else{echo "Recent";} ; echo "</th></tr>"; echo "<tr><th>Order Number</th>"; echo "<th>Order Date</th>"; echo "<th>Order Status</th>"; foreach ($status as $i){ $num = $i["orderNumber"]; echo "<tr onclick='appendrow(this,$num)'><td>" . $num . "</td>"; echo "<td>" . $i["orderDate"] . "</td>"; echo "<td>" . $i["status"] . "</td>"; echo "</tr>";

        }
       echo "</table>";
   }
    ?>

<script>
function appendrow(x,code) { var index = x.rowIndex var tbl = document.getElementById("Cancelled"); row = tbl.insertRow(index+1) 

    createCell(row.insertCell(0), 'Product Code');
    createCell(row.insertCell(1), 'Product Line');
    createCell(row.insertCell(2), 'Product Name');
}

function createCell(cell, text) { var txt = document.createTextNode(text); cell.appendChild(txt);
} /* This should be added on click echo "<tr><th>Product Code</th><th>Product Line</th><th>Product Name</th></tr>"; foreach ($orders as $key => $a) { if ($num == $key) { foreach ($a as $i) { echo "<tr><td>" . $i["productCode"] . "</td>"; echo "<td>" .$i["orderLineNumber"] . "</td>"; echo "<td>" .$i["productName"] . "</td></tr>"; } }
} */ </script>

1 Answer

Serhii Lihus
Serhii Lihus
6,352 Points

Hi there Haralds Cerins!

Solution 1: It's better to generate whole table using PHP(and hide sub rows with sub tables in them using CSS). JS role here is pretty simple, to hide or reveal elements by clicking on a row(removing or adding class).

Solution 2: You can use AJAX, which will eventually require to write more javascript that will be needed to send request, retrieve response and parse it. But do not forget that on server side you will do additional operations with database that will take time. But imagine if internet connection is lost on the client side ... ;)

In first case he will upload all his orders on the page(yes it will also take time to upload everthing), and in second case he will wait untill server respond.

But client wont be happy in both cases if he wont see page at all :D

To the point. Example below is front-end part(HTML, JS, CSS), but it can be redone to your needs using php ;) By the way, you've already have php code to build the table.

HTML:

<table id="main-table">
    <caption>Test Table</caption>
    <thead>
        <tr>
            <th>Order Number</th>
            <th>Order Date</th>
            <th>Order Status</th>
        </tr>
    </thead>
    <tbody>
        <tr class="info">
            <td>1</td>
            <td>31/12/2016</td>
            <td>Active</td>
        </tr>
        <tr class="hide">
            <td colspan="3">
                <table>
                    <thead>
                        <tr>
                            <th>Product Code</th>
                            <th>Product Line</th>
                            <th>Product Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>02233</td>
                            <td>1</td>
                            <td>Apple</td>
                        </tr>
                        <tr>
                            <td>02234</td>
                            <td>2</td>
                            <td>Orange</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr class="info">
            <td>2</td>
            <td>30/12/2016</td>
            <td>Not active</td>
        </tr>
        <tr class="hide">
            <td colspan="3">
                <table>
                    <thead>
                        <tr>
                            <th>Product Code</th>
                            <th>Product Line</th>
                            <th>Product Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>02235</td>
                            <td>1</td>
                            <td>Egg</td>
                        </tr>
                        <tr>
                            <td>02236</td>
                            <td>2</td>
                            <td>Tomato</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

CSS:

table,
tr td table {
    border-collapse: collapse;
    border: 1px solid black;
    width: 100%;
}

td {
    border: 1px solid black;
}

#main-table>tbody>tr.info:hover {
    background: #0000ff;
    color: #fff;
    cursor: pointer;
}

.hide {
    display: none;
}

JS

var tr = document.querySelectorAll(
    '#main-table>tbody>tr.info'
);
var length = tr.length;

function revealData() {
    var neighbour = this.nextSibling.nextSibling;
    neighbour.classList.toggle('hide');
}

for (var i = 0; i < length; i++)
    tr[i].addEventListener('click', revealData, false);

Small advice. Try not to mix js with php. Separate them. Let javascript do his work and php do it's own tasks. Divide and rule.

Hope this explain how things works.

Best regards!