HTML/Javascript中的數字行

我想知道是否有一種簡單的方法來實現我的HTML/Javascript表中的數字。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>

我不會發布我的Python /瓶的代碼，因爲我不相信這是必要的。

我想要做的就是添加一個從1到最後的位置列。

請讓我知道！

謝謝！

來源

2016-12-22 f_harrison

這應該爲你做的工作。

我在表中添加了一個位置列。對於表中的數據，我在那裏放置了循環計數器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?

來源

2016-12-22 15:43:20

真棒！這是答案。基本上，「loop.index」是做什麼的？ –

它獲取當前循環索引。所以如果一個for循環正在進行，它將維護一個內部計數器並獲取它的值。 –

您可以用本機使用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>

來源

2016-12-22 15:46:01

HTML/Javascript中的數字行

回答

相關問題