Here’s a novel use for the HTML <TABLE> tag: storing client side database tables. Nick Kallen came up with a slick hack that uses the jQuery syntax to perform simple selects and joins on HTML tables. By using CSS3 selectors, you can easily target fields which match or contain your search terms, and Nick’s jQuery-based API provides a simple query language, similar to a rudimentary SQL:
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
How cool is that? Check out Nick’s blog post for an example of text search and an inner join. The API in his jquery.db.js is quite straightforward and only about 50 lines of code. Adding a sort function shouldn’t be too difficult.
I’m pretty much convinced now that jQuery is black magic.
Building a relational database using jQuery and <TABLE> tags
Download the jquery.db.js library
6 thoughts on “Relational database using jQuery and HTML tables”
Comments are closed.
So, don’t leave us hanging…
Did it work???
I’ve been applying this thing up to 3 days and it seems to WORK! :-)
And it’s critical to eat something (rather ham&eggs than cereals) asap after you woke up.
… anyone else?
I’ve been applying this thing up to 3 days and it seems to WORK! :-)
And it’s critical to eat something (rather ham&eggs than cereals) asap after you woke up.
… anyone else?
I’ve been applying this thing up to 3 days and it seems to WORK! :-)
And it’s critical to eat something (rather ham&eggs than cereals) asap after you woke up.
… anyone else?
ou no… :-( can anyone delete this 2 spam duplicates?