How to Bind an CSS attribute to a Table Cell with Svelte - dom

Question

I understand that with Svelte (or any other framework) it's not a good idea to access the DOM directly, eg. document.getElementById and then do something over it. I have a non-dynamic table that is already on a page as a Svelte component then I also have the following data: an array representing the table row's cells (let's say I have 5 cells per row) and also another array where each element has the index number where I must add a CSS attribute active='1' in the correspondent table cell.
ex.: arrIdxs = [1,3,4] and arrCells = [a,b,c,d,e]
<table>
<tr>
<td>a</td>
<td active="1">b</td>
<td>c</td>
<td active="1">d</td>
<td active="1">e</td>
</tr>
</table>
What is a good way to accomplish that?

Answer 1

I'm not sure i understand the use case, but you would have to do something like this:
<script>
const arrIdxs = [1, 3, 4];
const arrCells = ['a', 'b', 'c', 'd', 'e'];
</script>
<table>
<tr>
{#each arrCells as cell, index}
<td class:active={arrIdxs.includes(index)}>{cell}</td>
{/each}
</tr>
</table>
<style>
.active {
background-color: red;
}
</style>