0

I was wondering if there was an easy way to implement numbers into my HTML/Javascript table.

Here is the current code:

<table style="width:75%", border="2">

    <th>Club</th>
    <th>Points</th>
    <th>Played Games</th>

    {% for team, score, game in data %}
    <tr>
    <td><strong>{{team}}</strong> </td>
    <td><emph> {{score}}</emph> <br/></td>
    <td>{{game}}</td>
    {% endfor %}
    </tr>

</table>

I will not post my python/flask code because I don't believe it is necessary.

All I would like to do is add a position column from 1 to the end.

Please let me know!

Thanks!

dirn
  • 19,454
  • 5
  • 69
  • 74
f_harrison
  • 51
  • 1
  • 8

2 Answers2

2

You can achieve this natively with CSS using counter if you don't wish to modify the code for your loop. Here's a live example:

table {
  counter-reset: position;
  width: 75%;
}

table td:first-child:before {
  counter-increment: position;
  content: counter(position);
}
<table border="2">

  <tr>
    <th>Position</th>
    <th>Club</th>
    <th>Points</th>
    <th>Played Games</th>
  </tr>

  <tr>
    <td></td>
    <td><strong>Team</strong></td>
    <td><emph>Score</emph><br/></td>
    <td>Game</td>
  </tr>

  <tr>
    <td></td>
    <td><strong>Team</strong></td>
    <td><emph>Score</emph><br/></td>
    <td>Game</td>
  </tr>

  <tr>
    <td></td>
    <td><strong>Team</strong></td>
    <td><emph>Score</emph><br/></td>
    <td>Game</td>
  </tr>

</table>
Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
0

This should do the job for you.

I have added a position column to your table. For data in the table I am putting loop counter loop.index there. You can add +1 to loop counter If you want the counter to start from 1 instead of 0.

<table style="width:75%", border="2">
    <th>Position</th>
    <th>Club</th>
    <th>Points</th>
    <th>Played Games</th>

    {% for team, score, game in data %}
    <tr><strong>{{loop.index}}</strong> </td>
    <td><strong>{{team}}</strong> </td>
    <td><strong>{{team}}</strong> </td>
    <td><emph> {{score}}</emph> <br/></td>
    <td>{{game}}</td>
    {% endfor %}
    </tr>

</table>

Source: How to output loop.counter in python jinja template?

Community
  • 1
  • 1
Vikash Singh
  • 13,213
  • 8
  • 40
  • 70