从CSV获取指定行值填充HTML表单时遇Index Error问题求助

问题详情 #

编写Flask脚本读取CSV文件第二行数据，逐列填充到HTML表单对应位置时，出现错误：Index Error: list index out of range。

原Python脚本 #

@app.route("/updateform")
def prefill_updateform():
    html_page = get_html("updateform")
    with open ("data.csv", "r") as source:
        reader = csv.reader(source)
        data = []
        for row in reader:
            data.append(row)
            option_list1 = data[2],[1]
            option_list2 = data[2],[2]
            option_list3 = data[2],[3]
            option_list4 = data[2],[4]
            return html_page.replace("$$OPTION1$$",str(option_list1))
                            .replace("$$OPTION2$$",str(option_list2))
                            .replace("$$OPTION3$$",str(option_list3))
                            .replace("$$OPTION4$$",str(option_list4))

原HTML脚本 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form to update issue</title>
<link rel="stylesheet" href="static/add.css">
</head>
<body>
<header>
    <p><a href="/">Go back on homepage</a></p>
</header>  
<form  action="/editi" method ="get">
<h1 id = "title updateform">Add an Issue</h1>
<br>
<div class="formbody">
<fieldset class="block1">
    <legend>Information</legend>
    <div class="input-group">
        <div><label>ID:
        <div>
            <select name="id" id="id">
                <option value="ID1">ID1</option>
                <option value="ID2">ID2</option>
                <option selected>$$OPTION1$$</option>
            </select>
        </div>
    </div>
    <br>
    <div class="input-group">
        <div><label>ID AH:
        <div><input type="text" name ="ah" id="ah">
        <div><input type="text" value = $$OPTION2$></label></div></div>
    </div>
    <div class="input-group">
        <div><label>ID CP:
        <div><input type="text" name ="id_cp" id="id_cp">
        <div><input type="text" value = $$OPTION3$></label></div></div>
    </div>
    <div class="input-group">
        <div><label>Value impacted:
        <div><input type="text" name ="value" id="value">
        <div><input type="text" value = $$OPTION4$></label></div></div>
    </div>
    </form>

    </body>
    </html>

错误原因分析 #

1. 索引逻辑错误：
   • Python列表索引从0开始，CSV第二行对应data[1]，原代码写data[2]会访问第三行（如果存在），直接导致越界。
   • data[2],[1]的写法完全错误，正确的列索引格式应为data[行索引][列索引]，比如第二行第一列是data[1][0]。
2. 循环逻辑错误：
   • 原代码在循环第一次迭代（读取CSV第一行）时就直接return，此时data中只有一行数据，访问data[2]必然触发索引越界。
3. 缺少边界判断：如果CSV文件行数不足2行，直接访问第二行也会触发错误。
4. HTML语法错误：input的value属性值未加引号，会导致渲染异常；label标签未正确闭合，id命名包含空格不符合规范。

修正后的代码 #

修正后的Python脚本 #

@app.route("/updateform")
def prefill_updateform():
    html_page = get_html("updateform")
    # 初始化默认值，避免CSV行数/列数不足时出错
    opt1 = opt2 = opt3 = opt4 = ""
    
    with open("data.csv", "r") as source:
        reader = csv.reader(source)
        # 将CSV内容转换为列表，方便直接按索引取行
        rows = list(reader)
        # 检查是否至少有2行数据（索引0是第一行，1是第二行）
        if len(rows) >= 2:
            second_row = rows[1]
            # 检查列数是否足够，避免列索引越界
            opt1 = second_row[0] if len(second_row) > 0 else ""
            opt2 = second_row[1] if len(second_row) > 1 else ""
            opt3 = second_row[2] if len(second_row) > 2 else ""
            opt4 = second_row[3] if len(second_row) > 3 else ""
    
    # 替换HTML中的占位符
    return html_page.replace("$$OPTION1$$", opt1)\
                    .replace("$$OPTION2$$", opt2)\
                    .replace("$$OPTION3$$", opt3)\
                    .replace("$$OPTION4$$", opt4)

修正后的HTML脚本 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form to update issue</title>
<link rel="stylesheet" href="static/add.css">
</head>
<body>
<header>
    <p><a href="/">Go back on homepage</a></p>
</header>  
<form action="/editi" method="get">
<h1 id="title-updateform">Add an Issue</h1>
<br>
<div class="formbody">
<fieldset class="block1">
    <legend>Information</legend>
    <div class="input-group">
        <div>
            <label>ID:</label>
            <div>
                <select name="id" id="id">
                    <option value="ID1">ID1</option>
                    <option value="ID2">ID2</option>
                    <option selected>$$OPTION1$$</option>
                </select>
            </div>
        </div>
    </div>
    <br>
    <div class="input-group">
        <div>
            <label>ID AH:</label>
            <div><input type="text" name="ah" id="ah"></div>
            <div><input type="text" value="$$OPTION2$$"></div>
        </div>
    </div>
    <div class="input-group">
        <div>
            <label>ID CP:</label>
            <div><input type="text" name="id_cp" id="id_cp"></div>
            <div><input type="text" value="$$OPTION3$$"></div>
        </div>
    </div>
    <div class="input-group">
        <div>
            <label>Value impacted:</label>
            <div><input type="text" name="value" id="value"></div>
            <div><input type="text" value="$$OPTION4$$"></div>
        </div>
    </div>
</fieldset>
</div>
</form>

</body>
</html>

关键修正点说明 #

1. 修正了CSV行和列的索引逻辑，确保正确访问第二行及对应列。
2. 添加了边界判断，当CSV行数或列数不足时使用默认空值，避免索引越界。
3. 调整了循环逻辑，先读取所有行再处理，避免提前return导致数据未完全读取。
4. 修正了HTML语法错误：给value属性值添加引号，修复label标签闭合问题，修正id命名格式。

内容的提问来源于stack exchange，提问作者dam's