javascript table cell selection

i want to achive excel sheet select functionality into my html table.

ie, selection of cells in the matrix format such as 1x1,2x2,3x3 etc,

please provide the sample code.

sorry couldn't upload the images...

---------
| 1 | 4 |
---------
| 2 | 3 |
---------

just open the e开发者_如何转开发xcel sheet and select two cells in one column(as in fig. cell 1 and cell 2) and then move to cell on the right(cell 3), here automatically the upper cell gets selected (cell 4)... i need the same functionality

Is this what you're looking for: http://jqueryui.com/demos/selectable/#display-grid ?

Here's a non-jQuery UI solution I made:

DEMO: http://jsfiddle.net/Blender/rxT5z/10/

JavaScript:

$('table td').hover(function() {
    for (var x = 0; x <= $(this).index(); x++) {
        for (var y = 0; y <= $(this).parent().index(); y++) {
            $(this).parent().parent().children().eq(y).children().eq(x).addClass('selected');
        }
    }
}, function() {
    $('table td').removeClass('selected');
});

CSS:

table tr td {
    border: 1px solid grey;
    padding: 10px;
}

table tr td.selected {
    background-color: rgb(200, 200, 255);
}

HTML:

<table>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

(By @pkaeding request)

You can use jquery.sheet. Seems to be a good choice. There you'll find some demos too.