Число строк в HTML/Javascript

Question

Мне было интересно, был ли простой способ реализовать числа в моей таблице HTML/Javascript.

Вот текущий код:

<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> 

Я не буду размещать мой питон/опоки код, потому что я не считаю, что это необходимо.

Все, что я хотел бы сделать, это добавить столбец позиции от 1 до конца.

Пожалуйста, дайте мне знать!

Спасибо!

Answer 1

Это должно сработать для вас.

Я добавил столбец позиции к вашему столу. Для данных в таблице я помещаю счетчик циклов loop.index. Вы можете добавить +1 к счетчику цикла Если вы хотите, чтобы счетчик, чтобы начать с 1 вместо 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> 

Источника: How to output loop.counter in python jinja template?

Answer 2

Вы можете достичь этого изначально с помощью CSS с помощью counter, если вы не хотите для изменения кода для вашего цикла. Вот живой пример:

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>