JQuery Move Table Rows Up And Down

To simply and easily move table rows up and down with in the table, use jquery.

With a table like:

<table>
<tbody>
<tr class="MoveableRow">
<td>Data 1</td>
<td><span class="down_button">down</span><span class="up_button">up</span></td>
</tr>
<tr></tr>
<tr class="MoveableRow">
<td>Data 2</td>
<td><span class="down_button">down</span><span class="up_button">up</span></td>
</tr>
<tr></tr>
</tbody>
</table>

You can then have some javascript like:

            $('.down_button').live('click', function () {
                var rowToMove = $(this).parents('tr.MoveableRow:first');
                var next = rowToMove.next('tr.MoveableRow')
                if (next.length == 1) { next.after(rowToMove); }
            });

            $('.up_button').live('click', function () {
                var rowToMove = $(this).parents('tr.MoveableRow:first');
                var prev = rowToMove.prev('tr.MoveableRow')
                if (prev.length == 1) { prev.before(rowToMove); }
            });

Previously I found a post somewhere that used the replaceWith method of jQuery. This wouldn’t retain newly written text in input boxes I had there. after and before work like charms, because you can pass in a jquery object as the content. Pretty slick.

JQuery and checkboxes

Just a quick post. I needed to find out if a check box was checked or not, and after some stupid failed attempts and using some suggestions found in a forum that didn’t worked, I decided to play around with it using Firebug. And checking is as simple as:

$('#theCheckbox').attr('checked')

This will return

true | false

Simple!

Context Menu jQuery Plugin

My supervisor asked me today if I would be interested in being in charge of all the graphic design projects including marketing. I said yes right away, because I like to play around with the GIMP and create user interfaces. This will prove to be a great experience.

Anyway, because of this new assignment, I have begun looking around the web for useful tools and resources for graphic design and things related to that. Since I classify UI with graphic design, I looked at javascript toolkits and libraries. In a previous post I talked about my recent discovery of jQuery. Of course I had heard of it before. I even visited the site, but we were using PrototypeJs extensively in our eLearning platform that I didn’t bother to look too deep. My thinking has changed and I have taken a more pragmatic view than I had in my early days (ok last month).

So, today I found a very useful jQuery plugin: contextMenu plugin. I have played around with it a little and it looks like a clever piece of code and judos to Chris Domigan for coding it and sharing it with the world.

The plugin is easy enough to use, and he has placed plenty of examples on the site, so go look at it and enjoy.