HTML/JS表单点击Submit无法写入数据到表格问题求助

你的表单提交无响应是3个核心错误导致的：

• ID大小写不匹配：AMKA输入框的id写的是大写AMKA，JS中获取元素用的是小写amka，getElementById严格区分大小写，这一步拿到null后访问.value会直接抛出JS错误，函数直接中断，后续逻辑完全不执行。
• 重复创建tbody元素：HTML表格规范中一个table只需要一个tbody作为数据行容器，你每次提交都新建一个tbody插入表格，不符合规范，后续做行操作会出异常。
• 结构不规范：script标签放在了html根标签下、head标签之前，部分浏览器环境下会出现函数未定义的报错。另外还存在几个不影响核心运行但不符合规范的小问题：年龄输入框type写了不存在的age值、AMKA输入框type写了不存在的AMKA值、表头th标签内违规放置br换行标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息录入</title>
    <style>
        div.complete {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 10%;
            overflow: auto;
        }

        div.form {
            height: 200px;
        }

        label {
            margin: 20px;
            display: block;
            font-size: 32px;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
            text-align: right;
        }

        input {
            padding: 10px;
        }

        span {
            color: red;
            position: fixed;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        button {
            padding: 10px;
            margin-top: 40px;
            left: 50%;
            position: fixed;
            transform: translate(-50%, -50%);
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
            
        }

        div#tables {
            height: 300px;
            overflow: auto;
        }

        table,
        th,
        td {
            border: 1px solid red;
            border-collapse: collapse;
            font-size: 32px;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
            padding: 10px;
        }

        th {
            width: 20%;
        }
    </style>
</head>
<body>
    <div class="complete">
        <div class="form">
            <label>Fullname: <input id="fullname" type="text"></label>
            <label>Age: <input id="age" type="number"></label>
            <label>AMKA: <input id="amka" type="text"></label>
            <span id="error"></span>
            <button onclick="publishToTable()">Submit</button>
        </div>
        <div id="tables">
            <table id="table">
                <thead>
                    <tr>
                        <th>Name/Surname</th>
                        <th>Age</th>
                        <th>AMKA</th>
                    </tr>
                </thead>
                <tbody id="tableBody"></tbody>
            </table>
        </div>
    </div>

    <script>
        function publishToTable() {
            const fullname = document.getElementById('fullname').value.trim();
            const age = document.getElementById('age').value.trim();
            const amka = document.getElementById('amka').value.trim();
            const error = document.getElementById('error');
            
            error.textContent = '';
            if (!fullname || !age || !amka) {
                error.textContent = '请补全所有必填信息';
                return;
            }

            const tableBody = document.getElementById('tableBody');
            const trElement = document.createElement('tr');
            const fullnameEle = document.createElement('td');
            const ageEle = document.createElement('td');
            const amkaEle = document.createElement('td');
            
            fullnameEle.textContent = fullname;
            ageEle.textContent = age;
            amkaEle.textContent = amka;
            
            trElement.appendChild(fullnameEle);
            trElement.appendChild(ageEle);
            trElement.appendChild(amkaEle);
            tableBody.appendChild(trElement);

            // 提交后清空输入框
            document.getElementById('fullname').value = '';
            document.getElementById('age').value = '';
            document.getElementById('amka').value = '';
        }
    </script>
</body>
</html>

• 增加了输入首尾空格过滤，避免用户输入全空格提交无效数据
• 补全了空值错误提示，之前定义的error元素没有被实际使用
• 替换innerHTML为textContent填充单元格内容，避免用户输入恶意脚本引发XSS问题
• 提交成功后自动清空输入框，优化连续录入体验
• 修正了所有不符合HTML规范的标签位置、属性值问题

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