Multiple Cells Selection in Table in html

Im trying to have a mulitple selection of cells in a table in html

Ex : I have a 4x4 table matrix And im trying to Select multiple cells

Also is it possible to create a dragable selection box around the table in or开发者_开发知识库der to select them

Is this possible if so can we only use javascript and css to accomplish this or do we need other softwares also

Thanks

$("td").click(function() {
    $(this).addClass("Selected");
});

Then just use a css class called Selected to highlight them with your style of choice.

use $(".Selected") to get all selected cells

If you insist on not using jQuery then

var addEvent = function(event, elem, f) {
    if (elem.attachEvent) {
        elem.attachEvent("on" + event, f);
    } else {
        elem.addEventListener(event, f, false);
    }
};

var addClass = function(elem, className) {
    if (elem.className.indexOf(className) == -1) {
        elem.className += " " + className;
    } else {
        elem.className = elem.className.replace(" " + className, "");    
    }
};

var addSelected = function() {
    addClass(this, "Selected");
};

var tds = document.getElementsByTagName("td");

for (var i = 0, elem = tds[i]; i < tds.length; elem = tds[++i]) {
    addEvent("click", elem, addSelected);
}

See live example