创建一个添加项目信息的表单页,为表单页中的添加参与人按钮编写事件,当按钮点击之后动态添加参与人姓名文本框、删除参与人按钮等表单控件。
时间: 2024-02-12 21:05:27 浏览: 121
基于Vue和Element UI的动态表单组件设计源码
好的,我可以为您提供一个示例代码来实现这个功能。请参考下面的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>添加项目信息</title>
<script>
function addParticipant() {
// 创建参与人姓名文本框
var input = document.createElement("input");
input.type = "text";
input.name = "participant[]";
input.placeholder = "请输入参与人姓名";
// 创建删除参与人按钮
var button = document.createElement("button");
button.type = "button";
button.innerHTML = "删除";
button.onclick = function() {
// 当删除按钮被点击时,删除对应的参与人文本框和删除按钮
input.remove();
button.remove();
};
// 将参与人文本框和删除按钮添加到表单中
var form = document.getElementById("project-form");
form.insertBefore(input, form.lastElementChild);
form.insertBefore(button, form.lastElementChild);
}
</script>
</head>
<body>
<form id="project-form">
<label for="name">项目名称:</label>
<input type="text" id="name" name="name" placeholder="请输入项目名称"><br><br>
<label for="description">项目描述:</label>
<textarea id="description" name="description"></textarea><br><br>
<label for="start-date">开始日期:</label>
<input type="date" id="start-date" name="start-date"><br><br>
<label for="end-date">结束日期:</label>
<input type="date" id="end-date" name="end-date"><br><br>
<label for="participants">参与人:</label><br>
<button type="button" onclick="addParticipant()">添加参与人</button><br><br>
<input type="submit" value="确定">
</form>
</body>
</html>
```
这个代码创建了一个表单,包括项目名称、项目描述、开始日期、结束日期和参与人等信息。当点击添加参与人按钮时,会动态添加一个参与人姓名文本框和一个删除参与人按钮。点击删除按钮时,会删除对应的参与人文本框和删除按钮。
这个代码使用了JavaScript动态创建表单控件,并给删除按钮绑定了事件处理函数。当删除按钮被点击时,会调用事件处理函数删除对应的参与人文本框和删除按钮。
希望这个代码能够帮到您!
阅读全文