Как "на лету" определять класс кликнутой ячейки?

[Edwards]

Есть таблица(table), в ней ячейки(td).

Большинству ячеек приписаны некие классы (td class="x(y,..)").

(На одну ячейку приходится не более одного класса.

Ячеек с одинаковыми классами не бывает)

 

Задача такова.

По клику на ячейку:

1) определять её класс;

2) открывать новое окно меньшего размера с адресом типа "x.html" (т.е. "имя_класса.html").

 

Как решать вторую задачу мне подсказали - через window.open.

Поэтому открывать конкретное дополнительное окно по клику на ячейку конкретного класса я умею. Примерно так:

var tableDataX = document.querySelector('td.x');

tableDataX.onclick = function() {

window.open('x.html', 'x', 'width=600px, height=800px');

}

Однако интуиция подсказывает, что писать отдельную функцию для каждой ячейки - путь неверный.

Как "на лету" определять класс кликнутой ячейки?

Я пробовал делать через this.getAttribute('class') - не вышло.

Вот так - не работает:
 

var tableData = document.querySelector('td');

tableData.onclick = function() {

var tableDataClass = this.getAttribute('class');

var urlInWindowOpen = tableDataClass + '.html';

window.open(urlInWindowOpen, tableDataClass, 'width=600px, height=800px');

}

 

[mrnobody]

https://learn.javascript.ru/event-delegation

[Edwards]

mrnobody, спасибо, будем разбираться.