Creé una tabla en un div solo con Json.

El div se ve así:

 <div id="datatable" class="datatable" data-mdb-hover="true" data-mdb-border-color="dark" data-mdb-full-pagination="true" data-mdb-clickable-rows="true" > </div>

luego creo la tabla:

 const columns = [ {label: 'ID', field: 'id'}, {label: 'Role', field: 'role'}, ]; const asyncTable = new mdb.Datatable( document.getElementById('datatable'), {columns,}, {loading: true} ) fetch('/api/roles') .then((response) => response.json()) .then((data) => { asyncTable.update( { rows: data.map((roles) => ({ ...roles, name: `${roles.id}`, role: `${roles.name}`, })), }, {loading: false} ); });

Ahora trato de cambiar la clase a "activa" si hago clic en un tr así:

 // function to select the row const table = document.getElementById('datatable'); table.addEventListener('rowClick.mdb.datatable', (e) => { const selected_item_id = e.row.id //console.log(e); //event.target._setClassNames("active"); event.target.querySelector("tbody tr").className += "active" activeT.push(selected_item_id) });

Está funcionando pero solo en el Primer tr. si hago clic en el segundo tr, agrega el "activo" al primer tr nuevamente ...

En la consola del navegador es esto después de 2 clics. Como se puede ver el doble activo aquí:

 <tr scope="row" data-mdb-index="0" class="activeactive"><td style="" class="" data-mdb-field="id" false="">18</td><td style="" class="" data-mdb-field="role" false="">Admin</td></tr>

¡Tal vez alguien pueda ayudarme!