JavaScript动态向表格添加表单输入数据问题求助

我看了你的代码，发现几个关键问题导致数据没正确添加到表格里，咱们一步步来修复：

主要问题点： #

• 获取输入值错误：你用了select()方法，这是用来选中输入框里的文本，不是获取输入值，应该用value属性。
• 元素ID大小写错误：国家下拉框的ID是country，但你代码里写的是Country，JS是大小写敏感的，所以找不到这个元素。
• 插入行的位置不对：insertRow(0)会把新行插到表头的上方，应该插到表格的最后一行，用insertRow()（不带参数默认插在最后）或者insertRow(table.rows.length)。
• 变量引用错误：给单元格赋值时你加了引号（比如"value"），这会把字符串"value"插进去，而不是变量里的实际值，要去掉引号。
• 表单默认提交行为：点击submit按钮会触发表单默认的提交刷新页面，导致刚添加的行瞬间消失，需要阻止这个行为。
• 样式位置不规范：你把<style>放在了<table>标签里面，虽然浏览器能解析，但不符合HTML规范，应该移到<head>里。

修正后的完整代码： #

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        input[type=text], select, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-top: 6px;
            margin-bottom: 16px;
            resize: vertical
        }

        input[type=submit] {
            background-color: #4CAF50;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        input[type=submit]:hover {
            background-color: #45a049;
        }

        .container {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <form onsubmit="return doFunction();">
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="Your name.." required>

            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lastname" placeholder="Your last name.." required>

            <label for="country">Country</label>
            <select id="country" name="country" required>
                <option value="australia">Australia</option>
                <option value="canada">Canada</option>
                <option value="usa">USA</option>
            </select>

            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

            <input type="submit" value="Submit">
        </form>
    </div>

    <table style="width:100%" id="myTable">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Country</th>
        </tr>
    </table>

    <script>
        function doFunction(){
            // 获取输入值
            var fname = document.getElementById("fname").value;
            var lname = document.getElementById("lname").value;
            var country = document.getElementById("country").value;
            
            // 获取表格对象
            var table = document.getElementById("myTable");
            // 在表格最后插入新行
            var row = table.insertRow();
            
            // 插入单元格并赋值
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            
            cell1.innerHTML = fname;
            cell2.innerHTML = lname;
            cell3.innerHTML = country;
            
            // 清空输入框（可选，提升用户体验）
            document.getElementById("fname").value = "";
            document.getElementById("lname").value = "";
            document.getElementById("country").value = "australia";
            document.getElementById("subject").value = "";
            
            // 阻止表单默认提交刷新页面
            return false;
        }
    </script>
</body>
</html>

额外优化点： #

• 给表单必填项加了required属性，确保用户不会提交空数据。
• 添加了清空输入框的逻辑，方便用户继续添加新数据。
• 把按钮的onclick事件移到了表单的onsubmit事件上，更符合表单提交的逻辑规范。

内容的提问来源于stack exchange，提问作者m.d venkatesh