Glad You're Ready. Let's Get Started!

Let us know how we can contact you.

Thank you!

We'll respond shortly.

Now I understand what they mean by tabular data (or: building a relational database using jQuery and <TABLE> tags)

Today I was thinking aloud about Tree Regular Expressions and how they might make a nice query language for document databases like CouchDB. Someone pointed out that CSS3 selectors might make a great concrete syntax for this. One thing lead to another and I thought, why not build a relational database in HTML? So I did. I even got inner joins working.

Let’s start with a few tables:

<table class="users">
    <td class="id">1</td>
    <td class="first_name">amy</td>
    <td class="last_name">bobamy</td>
<table class="photos">
    <td class="id">1</td>
    <td class="user_id">1</td>
    <td class="url"></td>

Now we can express some queries:


This is equivalent to SELECT * FROM users WHERE id = 1

  .select('.id, .name')

This is equivalent to SELECT id, name FROM users WHERE id = 1. Here is something slightly more complicated:


But here is the crowning glory, the inner join:


This is equivalent to:

SELECT photos.url FROM users, photos
WHERE photos.user_id =
  AND = 1

Download the fun at Github.

  1. Tim Connor says:

    Hahahahahha, now I have to find an excuse….

  2. Aman Gupta says:

    No benchmarks? =)

  3. We’re not in 2002 anymore. Seriously, relational database in html? I gotta go play with this.

  4. Haha, that’s great. Rock on man.

  5. Alex Chaffee says:

    Hey, and with the right stylesheet, your data dumps are going to look *real* pretty…

    Soon you can even use [CSS3 to style tables](
    )… But darn, that would *totally* violate model-view separation :-)

  6. Geeez… this is seriously cool and fun. But dude, you have too much free time man.

  7. On my side, I ended up writing a CSS3 engine which used a relational database on the server side. The two worlds MUST NEVER COLLIDE!!

  8. seb says:

    this might actually be quite usefull for teaching database queries to students. like some sort of interactive web-based tutorial.

  9. Peter Cooper says:

    That’s it, I’m sold! I’m with Yegge, Resig and the rest. JavaScript is the only language that’ll matter in a few years’ time!

  10. Myles Eftos says:

    That’s awesome. Really awesome… Couple that with things like JS based table sort, you could have a hot little data search engine there…

  11. SFdude says:

    Very nice, using the output to Firebug Console.

    But…from a practical angle,
    what’s the code to display the 3 query results
    in the web page itself,
    not in the Firebug Console?

    (3 results displayed in the page
    containing the 2 tables, “users” and “photos”…).


  12. Dan Brickley says:

    Very cool :)

    For similar fun in a different syntax, you can play with Jan Grant’s ‘javascript prolog’; eg. I made using

  13. Greg Weber says:

    Very clever! I made a tablelib, a jQuery library for serializing javascript object into html tables, and/or querying tables. The querying language is just JSON, and of course there is no joining.

Post a Comment

Your Information (Name required. Email address will not be displayed with comment.)

* Copy This Password *

* Type Or Paste Password Here *

Share This