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

実際の例を見る