Skip to content
A relational database using <table> tags and jQuery
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
README.markdown formatting README
example.html documentation
jquery.db.js added source

README.markdown

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">
  <tr>
    <td class="id">1</td>
    <td class="first_name">amy</td>
    <td class="last_name">bobamy</td>
  </tr> 
  ...
</table>
<table class="photos">
  <tr>
    <td class="id">1</td>
    <td class="user_id">1</td>
    <td class="url">http://www.example.com/foo.png</td>
  </tr> 
</table>

Now we can express some queries:

$('.users')
  .where('.id:eq(1)')
  .select('*')

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

$('.users')
  .where('.id:eq(1)')
  .select('.id, .name')

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

$('.users')
  .where('.name:contains(a)')
    .and('.name:contains(c)')
  .select('*')

But here is the crowning glory, the inner join:

$('.users')
  .join('.photos')
  .where('.photos.user_id:eq(.users.id)')
    .and('.users.id:eq(1)')
  .select('.photos.url')

This is equivalent to:

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

Download the fun at Github.

Something went wrong with that request. Please try again.