Динамическое добавление и удаление класса CSS в ячейки сетки табуляции ⇐ CSS

[Anonymous]

Я хотел бы «выбрать» столбец в таблице, созданной с помощью сетки Tabulator. Чего я хочу добиться, так это добавить класс CSS в выбранный столбец:


Я попытался сделать это, добавив функцию cellClick (см. фрагмент). Я могу изменить стиль HTML элементов ячейки и изменить цвет. Но я хотел бы добавить класс CSS: «выбранный столбец» в каждую ячейку выбранного столбца. Мне также интересно, есть ли более элегантное решение, чем добавление функции onCellClick?

Код: Выделить всё

var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
];

var table = new Tabulator("#example-table", {
data:tabledata, //assign data to table
columns:[ //Define Table Columns
{title:"Name", field:"name"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob"},
],
columnDefaults:{
cellClick:function(e, cell){
cell.getColumn().getCells().forEach(function(cell){
cell.getElement().style.color = "#A6A6DF";
})
},
},
});

Код: Выделить всё

.column-selected {
color:red;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/776 ... grid-cells