Saturday, May 12, 2012

Multiple selecting the table cell using JQuery

A few year ago, it was challenging a lot for web developer because of intensive user requirement such as complex interactive user interface and design in web page. Nowadays, it can be solved it out easily due to JQuery that is designed to change the way that you write JavaScript. This example show you how to select multiple cells in table.

Multiple Selecting cells in table

First, create an jquery_air.css file as below.
#airplane
{
    font-size: 0;
    margin: 0 0 15px;
    overflow: hidden;
    position: relative;
}

#airplane a
{
    background-image: url(../img/uncheck.png);
    background-repeat: no-repeat;
    display: block;
    width: 35px;
    height: 35px;
}

#airplane a.selected
{
    background-image: url(../img/check.png);
    background-repeat: no-repeat;
}
Second, create an jquery_air.js as below.
$(document).ready(function () {
    var selectedList = new Array();

    // Add click listener to seats
    $('#airplane a').click(function () {
        // Toggle selected class on/off
        $(this).toggleClass('selected');

        var add = true;
        var title = $(this).attr('title').toString();
        var len = selectedList.length;
        for (var i = 0; i < len; i++) {
            if (selectedList[i] == title) {
                //remove title if exist already(it mean uncheck)
                selectedList.splice(i, 1);
                add = false;
                break;
            }
        }
        // add title if not exist in array(it mean check)
        if (add)
            selectedList.push(title);

        //show selected title here
        $('div#display').text(selectedList.toString());
        //to get rid of the focus 
        this.blur();
        //to stop the link from being followed
        return false;
    });
});
Put the following code to <head> tag. Keep in mind that we need jquery library here.
<head runat="server">
    <title>Multiple Selection</title>
    <script type="text/javascript" src="yoururl/jquery-1.4.1.js"></script>
    <link rel="stylesheet" type="text/css" href="yoururl/jquery_air.css" />
    <script type="text/javascript" src="yoururl/jquery_air.js"></script>
</head>
In <form> tag, the table is look like as below.
<form id="form1" runat="server">
    <div>
        <table id="airplane">
            <tr>
                <td>
                    <a href="#row_01" title="01A">01A</a>
                </td>
                <td>
                    <a href="#row_01" title="01B">01B</a>
                </td>
                <td>
                    <a href="#row_01" title="01C">01C</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="#row_02" title="02A">02A</a>
                </td>
                <td>
                    <a href="#row_02" title="02B">02B</a>
                </td>
                <td>
                    <a href="#row_02" title="02C">02C</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="#row_03" title="03A">03A</a>
                </td>
                <td>
                    <a href="#row_03" title="03B">03B</a>
                </td>
                <td>
                    <a href="#row_03" title="03C">03C</a>
                </td>
            </tr>
        </table>
    </div>
    <div id="display">
    </div>
</form>
That' it. This table has 3 rows and 3 columns. When you click the table cell, it shows each table cell title you selected. JQuery is funny that way.

More Detail : jQuery Crash Course

No comments:

Post a Comment