Tryit Editor v1.8

Source Code:
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="appml.css"> <link rel="stylesheet" href="demo.css"> </head> <body> <h1>Customers</h1> <div id="Form01"></div> <div id="List01"></div><br> <div id="Orders01"></div> <table id="Template01" class="appmltable" style="width:100%;display:none"> <tr> <th></th> <th>Customer</th> <th>City</th> <th>Country</th> <th>Orders</th> </tr> <tr id="appml_row"> <td style="cursor:pointer" onclick='customerForm.run("Form01","","#CustomerID#")'> <img src="images/appmlplus.png"></td> <td>#CustomerName#</td> <td>#City#</td> <td>#Country#</td> <td><a href='default.htm' onclick='openOrders("#CustomerID#");return false;'>Orders</a></td> </tr> </table> <table id="Template02" class="appmltable" style="width:100%;display:none"> <tr> <th>Customer</th> <th>Date</th> <th>Salesperson</th> <th>Shipper</th> </tr> <tr id="appml_row"> <td>#CustomerName#</td> <td>#OrderDate#</td> <td>#Salesperson#</td> <td>#ShipperName#</td> </tr> </table> <script src="appml.js"></script> <script> var customers,customerForm,orders; customers=new AppML("appml.aspx","Models/Customers"); customers.run("List01","Template01"); customerForm=new AppML("appml.aspx","Models/Customers"); customerForm.displayType="form"; function openOrders(id) { orders=new AppML("appml.aspx","Models/Orders"); orders.commands=false; orders.setQuery("orders.customerid",id); orders.run("Orders01","Template02"); } </script></body> </html>
Result:
W3Schools.com - Try it yourself