Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Almost all of what you're asking can be done with a few CSS rules and a very simple jQuery toggle. I have posted an example here: <a href="http://jsfiddle.net/2BbUw/" rel="nofollow">http://jsfiddle.net/2BbUw/</a></p> <p>The essential gist is that you create CSS rules which force only the first row's first child to be visible when in <code>.collapsed</code> mode - and then use jQuery to toggle the <code>.collapsed</code> tag on the table itself.</p> <p>The jQuery then becomes extremely simple:</p> <pre><code>$(document).ready(function () { $('table.collapsible tr:first-child').on('click', function(ev) { $(ev.target).closest('table.collapsible').toggleClass('collapsed'); });​ }); // note that the above only works in later versions of jQuery, due to .on() // If you are using an earlier version of jQuery, replace .on() with .bind() </code></pre> <p>The handler points only at the <code>tr:first-child</code> (the first row in the table). Because this is all CSS-selector based, it will also automatically apply to ALL <code>.collapsible</code> tables in your page.</p> <p>The CSS is a little more complex, because it uses a series of pseudo-selectors:</p> <pre><code>table.collapsible { width: 400px; border: 1px solid #666; margin: 5px; position: relative; } table.collapsible td { padding: 5px; } table.collapsible tr:first-child td:first-child { text-indent: 15px; } table.collapsible.collapsed tr:not(:first-child), table.collapsible.collapsed tr:first-child td:not(:first-child) { display: none; } </code></pre> <p>For the indicator you requested - I'd propose something along the following lines. Note that this is a little rough, but again - a pure CSS solution (meaning very fast in the browser).</p> <pre><code>table.collapsible::before { content: ''; border: none; position: absolute; left: 5px; top: 12px; height: 10px; width: 10px; border-radius: 5px; background-color: green; } table.collapsible.collapsed::before { background-color: red; } </code></pre> <p>I think you'll find that this works in all browsers - is very fast due to being all CSS toggles - and handles the various things you asked for with very simple jQuery.</p>
    singulars
    1. This table or related slice is empty.
    1. POCollapsible table bug jquery
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USTroy Alford
    1. USTroy Alford
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COthe code doesnt work implented on my site =\ though thats almost exactly what i need :) (sorry if these are noob questions though i never did research in javascript, learning php and webdesign atm :p) i did in 1 php file: <style> style stuff </style> <script type="text/javascript">javascript stuff</script> table
      singulars
      1. PO
      1. USDylan Westra
    2. COIf you put it up at your URL - I will try to debug it for you.
      singulars
      1. PO
      1. USTroy Alford
    3. COdone ^^ ......... ^^
      singulars
      1. PO
      1. USDylan Westra
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload