0

I want to start an introJS tour on a specific HTML table. The thing is that the table is hidden initially.

<table id="table" border="2" style="display: none;">
    <tr>
        <td><b>Col_0</b></td>
        <td><b>Col_1:</b></td>
        <td><b>Col_2:</b></td>
    </tr>
</table>

Only after populating the table rows, do I make it visible:

while(i != 10){
    let row = table.insertRow(table.rows.length);
    let cell_0 = row.insertCell(0);
    let cell_1 = row.insertCell(1);
    let cell_2 = row.insertCell(2);

    cell_0.innerHTML = some value;
    cell_1.innerHTML = some value;
    cell_2.innerHTML = some value;
}

table.style.display="block";

My goal is to enable the tour in the first column of the table, only after the table is visible.

First of all how do I select only the first column of the table? Secondly, how do I add the data-title and data-intro attributes of the introJS library dynamically to the first column of the table?

And how do I make sure the animation only plays when the table is visible?

  • Technically, your table element doesn't have anything representing columns. You've to select the first cell of each row to get a column selected. Take a look at [nth-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child) pseudo-class. If the table contains spanned cells, selecting a correct cell from a row might be tricky. – Teemu Jan 18 '23 at 06:29

0 Answers0