Flask邮件列表网页：新增输入行保存转非编辑文本功能故障

问题说明 #

现有基于Flask的邮箱管理页面，可读取文本文件中的邮箱地址并展示在表格中，每行配有删除按钮，点击保存按钮可将表格数据写入文件。当前无法实现以下功能：

• 添加带输入框的行供用户输入新邮箱，点击保存后新邮箱无法存入文件
• 保存后输入框未转为不可编辑文本，页面仍保留输入框但新增行未正确固化

后端代码修复 #

原代码存在两个核心问题：一是首页未读取实际的emails.txt文件，而是返回固定测试数据；二是未导入json模块导致解析失败。修复后的代码如下：

from flask import Flask, render_template, request, json
import os

app = Flask(__name__)
data_file = 'emails.txt'

# 确保文件存在，避免首次运行报错
if not os.path.exists(data_file):
    with open(data_file, 'w') as f:
        f.write("tester@email.com\nuser@email.com")

@app.route("/save", methods=["POST"])
def saveEmails():
    rows = json.loads(request.form["emails"])
    # 过滤空值，避免写入空行
    valid_rows = [row.strip() for row in rows if row.strip()]
    with open(data_file, 'w') as f:
        for row in valid_rows:
            f.write(row + '\n')
    return render_template('index.html', emails=valid_rows)

@app.route("/")
def showData():
    # 读取实际文件中的邮箱数据
    with open(data_file, 'r') as f:
        data = [line.strip() for line in f if line.strip()]
    return render_template("index.html", emails=data)

if __name__ == "__main__":
    app.run(debug=True)

前端代码修复 #

原前端代码存在三个核心问题：一是保存时未正确获取输入框中的值；二是循环遍历表格行的条件错误；三是新增行的删除按钮无法正确获取行索引。修复后的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Email Manager</title>
</head>
<body>
    <h3>Emails</h3>
    <button onclick="addRow()">Add row</button>
    <button onclick="saveEmails()">Save to file</button>
    <br><br>

    <table id="data-table" border="1">
        {% for email in emails %}
        <tr>
            <td>{{ email }}</td>
            <td><button onclick="deleteRow(this)">Delete</button></td>
        </tr>
        {% endfor %}
    </table>

    <script>
        function deleteRow(button) {
            var row = button.parentNode.parentNode;
            row.parentNode.removeChild(row);
        }

        function saveEmails() {
            var table = document.getElementById('data-table');
            var data = [];
            // 正确遍历所有表格行
            for (var i = 0; i < table.rows.length; i++) {
                var cell = table.rows[i].cells[0];
                // 判断单元格内是否为输入框，获取对应内容
                var email = cell.querySelector('input') ? cell.querySelector('input').value.trim() : cell.innerText.trim();
                if (email) {
                    data.push(email);
                }
            }
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/save', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function() {
                if (xhr.status === 200) {
                    // 保存成功后刷新页面，重新渲染表格
                    window.location.href = '/';
                }
            };
            xhr.send('emails=' + encodeURIComponent(JSON.stringify(data)));
        }

        function addRow() {
            var table = document.getElementById('data-table');
            var row = table.insertRow(table.rows.length);
            var cell1 = row.insertCell(0);
            var input = document.createElement('input');
            input.type = 'text';
            input.placeholder = 'Enter email';
            cell1.appendChild(input);

            var cell2 = row.insertCell(1);
            var button = document.createElement('button');
            button.textContent = 'Delete';
            button.onclick = function() {
                deleteRow(this);
            };
            cell2.appendChild(button);
        }
    </script>
</body>
</html>

修复说明 #

1. 后端：

   • 新增文件存在性检查，首次运行自动创建初始文件
   • 首页改为读取实际文件数据，而非固定测试值
   • 导入json模块，确保解析请求数据正常
   • 过滤空值，避免写入无效空行

2. 前端：

   • 修改删除按钮逻辑，通过按钮元素直接获取所在行，无需依赖索引
   • 保存时区分单元格内是文本还是输入框，正确获取邮箱内容
   • 修复表格行遍历的循环条件，避免无限循环
   • 保存成功后刷新页面，确保输入框转为不可编辑的文本，且新增行保留

内容的提问来源于stack exchange，提问作者Frank