html表格中的多个单元格选择

Question

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 order 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

Answer 1

$("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