以下是一个示例的比赛表格表单的解决方法,使用了HTML和JavaScript来创建和处理表格表单。
HTML部分:
比赛表格表单
比赛表格表单
JavaScript部分(script.js):
function submitForm(event) {
event.preventDefault(); // 阻止表单提交的默认行为
// 获取表单元素的值
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var event = document.getElementById("event").value;
// 创建一个表格行并插入表格中
var table = document.getElementById("competitionTable");
var row = table.insertRow(-1); // 在表格末尾插入新行
// 创建单元格并设置值
var nameCell = row.insertCell(0);
var ageCell = row.insertCell(1);
var eventCell = row.insertCell(2);
nameCell.innerHTML = name;
ageCell.innerHTML = age;
eventCell.innerHTML = event;
// 清除表单输入
document.getElementById("name").value = "";
document.getElementById("age").value = "";
document.getElementById("event").value = "";
}
在这个示例中,当用户点击提交按钮时,submitForm
函数被调用。它首先阻止了表单提交的默认行为,然后获取了输入字段的值。接下来,它在表格的末尾插入了一个新的行,并将输入字段的值插入到相应的单元格中。最后,它清除了表单输入,以便用户可以输入新的数据。
上一篇:比赛报名应用中的倒计时计时器