前端--动态给合成表格添加序号-jQuery

本文链接：https://blog.csdn.net/weixin_44214830/article/details/110474486

前提：我的项目大致是后端处理好数据后，通过jinja2模板传到前端页面，jinja2读取模板写入数据形成新的静态页面。

本文主要说明项目中一个小功能的实现，用到jQuery，版本：jquery-3.5.1.min.js

需求：我的表格是由三个数据框组成的，最后形成的表格需要在最前面添加一列为序号列。

分析：表格是由三个数据框组成的，这样就需要分别判断每一个数据框是否为空，空的则不能写入。所以jinja2中的{{ loop.index }}不能满足我们的需求。

实现：导入jquery-3.5.1.min.js文件，添加js函数，给table一个id，获取id进行处理，这样是为了准确定位到具体的表格。

源码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-3.5.1.min.js" type="text/javascript"></script>
<title>序号</title>
</head>

<body>
    <table width=500 border=2>
		<tbody id="num">
		<tr>
			<th width=150>序号</th>
			<th width=150>第一列</th>
			<th width=150>第二列</th>
		</tr>
        <tr>
			<td></td>
			<td>1</td>
			<td>2</td>
		</tr>
		<tr>
			<td></td>
			<td>1</td>
			<td>2</td>
		</tr>
		<tr>
			<td></td>
			<td>1</td>
			<td>2</td>
		</tr>
		<tr>
			<td></td>
			<td>1</td>
			<td>2</td>
		</tr>
		<tr>
			<td></td>
			<td>1</td>
			<td>2</td>
		</tr>
		<tr>
			<td></td>
			<td>1</td>
			<td>2</td>
		</tr>
        
		</tbody>

    </table>
	
	
</body>

<!-- js函数 -->
 <script language="javascript" type="text/javascript">
	    window.onload = function(){
		    var oTable = document.getElementById("num");
		    for(var i=0;i<oTable.rows.length;i++){
		    oTable.rows[i+1].cells[0].innerHTML = (i+1);
	    }
    }
 </script>
</html>

结果：