0

I want to make the rows of my HTML table display one by one with delay. I am using Flask

Here is my HTML code:

<table class="styled-table">
    <tr>
    {% for header in headings %}
        <th>{{ header }}</th>
    {% endfor %}
    </tr>
    {%for row in data_listed %}
        <tr>
        {% for cell in row %}
            <td>{{ cell }}</td>
        {% endfor %}
        </tr>
    {% endfor %}
</table>

I tried to search on Internet but didn't find the answer

Michael M.
  • 10,486
  • 9
  • 18
  • 34
fizzy
  • 1
  • 2
    From my understanding, Flask is a server-side language, so all of the table rows would be created before the HTML is sent to the browser. You could add JavaScript/CSS to delay the display of the rows, but that sounds like a good way of making customers unhappy... – Heretic Monkey Oct 26 '22 at 16:58
  • [Using CSS transition and class toggle to show/hide table rows](https://stackoverflow.com/q/55629239/215552) should get you started. – Heretic Monkey Oct 26 '22 at 17:00
  • Can you tell me more? I don't know CSS/JS that much. Even with this topic I don't manage to do that. I'm new to coding lol – fizzy Oct 26 '22 at 17:17
  • 1
    This site isn't geared toward tutorials or mentoring. It's about specific answers to specific programming-related questions (see the [tour] and [ask]). – Heretic Monkey Oct 26 '22 at 17:19

1 Answers1

0

you can use setInterval to time the rows. Just be sure to clearInterval when you're done

let tds = document.querySelectorAll('td')
let cnt = tds.length


const myRowTimer = setInterval(displayRow, 1000);
let row = 1;

function displayRow(){
   tds[row].classList.toggle("none");
   row++
   if(row == cnt)clearInterval(myRowTimer);
}
.none{
display:none;
}
<table>
  <tr>
    <td>row 1</td>
  </tr>
  <tr>
    <td class='none'>row 2</td>
  </tr>
  <tr>
    <td class='none'>row 3</td>
  </tr>
  <tr>
    <td class='none'>row 4</td>
  </tr>
</table>
DCR
  • 14,737
  • 12
  • 52
  • 115
  • Hello, firstly thanks for helping me. I just copied your code and it works perfectly except the first row. screenshot here: https://ibb.co/RbLj5w0 Do you know why? – fizzy Oct 26 '22 at 18:09
  • the first row should display right away as there's no class='none' on it. You would have to show me your code? Does it work the way you want in the snippet? – DCR Oct 26 '22 at 18:45
  • it looks like you have class='none on the second td if the first row. delete the class and it should work – DCR Oct 26 '22 at 18:47