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

Question

我试图在 html 的表格中选择多个单元格

例如：我有一个 4x4 表格矩阵，我试图选择多个单元格

也可以在表格周围创建一个可拖动的选择框以选择它们

如果可以的话，这可能吗？我们只能使用 javascript 和 css 来完成吗？或者我们还需要其他软件吗？

谢谢

Answer 1

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

然后只需使用一个名为 Selected 的 CSS 类来用您选择的样式突出显示它们。

用于$(".Selected")获取所有选定的单元格

如果你坚持不使用 jQuery，那么

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);
}

查看实时示例