jQuery: Grid like table with keyboard navigation

jQuery: Grid like table with keyboard navigation

Guess what time is it kids? It’s time for yet another boring, technical post. It’s that sort of week. Or rather it was – I usually queue my posts approximately 8-10 days in advance. This means that if I get hit by a bus one day, you won’t know anything is wrong until a week or so later. But I digress…

One of the web apps I maintain has a big table that looks like this:

<table>
	<tr>
		<td><input class='flat' name='foo'></td>
		<td><input class='flat' name='bar'></td>
		<td><input class='flat' name='baz'></td>
		<td><input class='flat' name='bin'></td>
		<td><input class='flat' name='bom'></td>
		<td><input class='flat' name='bam'></td>
	</tr>

	. . .
	. . .
	. . .

	<tr>
		<td><input class='flat' name='foo'></td>
		<td><input class='flat' name='bar'></td>
		<td><input class='flat' name='baz'></td>
		<td><input class='flat' name='bin'></td>
		<td><input class='flat' name='bom'></td>
		<td><input class='flat' name='bam'></td>
	</tr>
</table>

Basically, every cell contains an input box. Each of them has an onChange trigger which will submit it’s contents to the database via AJAX call. It basically allows the user to pull up a full page of records and edit them en masse without doing a lot of clicking.

Unfortunately this setup is a pain in the ass to navigate. Tabbing over works fine but only in one direction. The most intuitive way to traverse such a structure would be with the arrow keys – you know, just like a big spreadsheet. Sadly it just doesn’t work that way. But we can make it work like that with just a pinch of jQuery magic:

$(document).ready(function() {
    $("input.flat").keypress( function (e) {
        switch(e.keyCode)
        {
            // left arrow
            case 37:
                $(this).parent()
                        .prev()
                        .children("input.flat")
                        .focus();
                break;

            // right arrow
            case 39:
                $(this).parent()
                        .next()
                        .children("input.flat")
                        .focus();
                break;

            // up arrow
            case 40:
                $(this).parent()
                        .parent()
                        .next()
                        .children("td")
                        .children("input.flat[name="
                            +$(this).attr("name")+"]")
                        .focus();
                break;

            // down arrow
            case 38:
                $(this).parent()
                        .parent()
                        .prev()
                        .children("td")
                        .children("input.flat[name="
                            +$(this).attr("name")+"]")
                        .focus();
                break;
        }
    });
});

How does this work? Each time you press a key while one of the input boxes is in focus, I check the key code. If the code corresponds to one of the arrow key values I switch focus. The statements up there look a bit convoluted so let me explain one in more detail. Let’s do the left arrow:

  1. First we use the parent() function to get the parent node of the input box. This gives us the <td> tag
  2. Second, we use the prev() to get the previous sibling of our <td> node
  3. Third, we get the list of children of that node – and we narrow it down to just input boxes with the specific class. Because of the way our table is structured, we know there will always be exactly one child there
  4. Finally we call the focus() function on all the children (remember, there is only one there) which moves the cursor over

Moving up and down, requires extra steps. We call parent() twice to back out to the <tr> tag and grab previous or next sibling of that. Then we grab all the <td> children, and their children but narrowing it down to input boxes with the same name as the one that triggered the focus change. Once again there will always be exactly one node there.

End result is intuitive keyboard navigation that allows you to move in the table very much the way you move around in an Excel spreadsheet. I thought this was a pretty neat effect so I decided to share it here.

I created a live demo to demonstrate this effect. Mess around with it and let me know what you think. It’s a simple little tweak, but makes a huge usability difference – at least in my opinion.

Does anyone has an idea how to make this prettier, faster, better, stronger and etc? This code is probably suboptimal, but it works. I actually tested it on large-ish data sets, and it didn’t seem to cause visible slowdowns. But of course I’m always open for constructive criticism.

How to implement excel like order detail edit grid, can jqGrid used

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>

    $(document).ready(function () {

        $("input.cell").keyup(function (e) {


            switch (e.keyCode) {
                // left arrow
                case 37:
                    $(this).parent()
                        .prev()
                        .children("input.cell")
                        .focus();
                    break;

                // right arrow
                case 39:
                    $(this).parent()
                        .next()
                        .children("input.cell")
                        .focus();
                    break;

                // up arrow
                case 40:
                    $(this).parent()
                        .parent()
                        .next()
                        .children("td")
                        .children("input.cell[name="
                            + $(this).attr("name") + "]")
                        .focus();
                    break;

                // down arrow
                case 38:
                    $(this).parent()
                        .parent()
                        .prev()
                        .children("td")
                        .children("input.cell[name="
                            + $(this).attr("name") + "]")
                        .focus();
                    break;
            }
        });
    });</script>
    <table>
    <tr>
        <td>
            <input class='cell' name='foo'>
        </td>
        <td>
            <input class='cell' name='bar'>
        </td>
        <td>
            <input class='cell' name='baz'>
        </td>
        <td>
            <input class='cell' name='bin'>
        </td>
        <td>
            <input class='cell' name='bom'>
        </td>
        <td>
            <input class='cell' name='bam'>
        </td>
    </tr>
    <tr>
        <td>
            <input class='cell' name='foo'>
        </td>
        <td>
            <input class='cell' name='bar'>
        </td>
        <td>
            <input class='cell' name='baz'>
        </td>
        <td>
            <input class='cell' name='bin'>
        </td>
        <td>
            <input class='cell' name='bom'>
        </td>
        <td>
            <input class='cell' name='bam'>
        </td>
    </tr>
</table>

more details refer: http://www.terminally-incoherent.com/blog/2009/10/08/jquery-grid-like-table-with-keyboard-navigation/

jqgrid pleaes refer: http://www.trirand.com/blog/jqgrid/jqgrid.html

hope this helps, thanks.

>>http://forums.asp.net/t/1702451.aspx/1

Advertisements

15 comments on “jQuery: Grid like table with keyboard navigation

  1. I am not certain where you’re getting your information, but good topic. I must spend some time studying more or working out more. Thank you for great info I was in search of this info for my mission.

  2. Thank you for another fantastic post. Where else could anyone get that kind of info in such an ideal way of writing? I’ve a presentation next week, and I am on the look for such information.

  3. A person essentially assist to make critically articles I’d state. This is the very first time I frequented your website page and so far? I amazed with the research you made to make this actual publish amazing. Excellent process!

  4. Hello there, just became aware of your blog through Google, and found that it’s truly informative. I’m gonna watch out for brussels. I’ll be grateful if you continue this in future. Numerous people will be benefited from your writing. Cheers!

  5. Thanks for the good writeup. It actually was a enjoyment account it. Glance advanced to far introduced agreeable from you! However, how can we keep in touch?

  6. I have observed that online degree is getting well-known because obtaining your degree online has become a popular alternative for many people. Numerous people have definitely not had a possibility to attend a regular college or university however seek the raised earning possibilities and career advancement that a Bachelor’s Degree grants. Still people might have a college degree in one field but would wish to pursue one thing they now possess an interest in.

  7. Selling Fake Scans ( Passport , Utility Bills , Bank Statement Credit Card Scan )
    Contact ICQ # 611417679
    We Sell Passport / ID Scan
    You Can Have any name , passport number , date of Birth u want
    We Also Sell Credit Card Scans And Bank Statement
    Any Card Number U want will be make

    Price is fix for every scan 25$
    Nearly Every Country In Stock Contact For more Option

    Fake Passport
    Fake ID Card
    Fake Address Proof
    Fake Credi Card Scan

    Contact ICQ # 611417679 Only

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s