html table首列自动添加序列

<table class="table table-striped" >
        <thead >
            <tr>
                <th>序号</th> <th>语料名称</th> <th>创建者</th> <th>创建时间</th>  <th>操作</th>
            </tr>
        </thead>
        <tbody id="number">
             {% for i in projects %}
                 <tr>
                    <td></td><td>{{ i.name }}</td> <td>{{ i.user }}</td> <td>{{ i.ctime }}</td>
                     <td>
                         <button  onclick="show_yuliao('{{ i.id }}')" class="btn btn-success">查看语料</button>
                         <a href="{% url 'download_yuliao' id=i.id %}"><button class="btn btn-success">下载语料</button></a>
<!--                         <a href="/download_yuliao/{{ i.id }}"><button class="btn btn-success">下载语料</button></a>-->
                         <button  onclick="delete_yuliao('{{ i.id }}')" class="btn btn-danger">删除语料</button>
                     </td>
                </tr>

            {% endfor %}
        </tbody>
    </table>

<script language="javascript" type="text/javascript">

     // 实现列表的序号顺序显示
         var tableLine = document.getElementById("number");
         for (var i = 0; i < tableLine.rows.length; i++) {
             tableLine.rows[i].cells[0].innerHTML = (i + 1);
         }
     
</script>